SVG: The Basics of Vector Graphics
Overall, SVG format is an accurate, resolution-independent (hence, the word “scalable”) description of the steps that are to be taken to draw the necessary picture.
It includes several types of various objects:
- vector graphics (lines, circles, curves)
- text (with the formatting ability, setting styles and effects)
- raster images (embedded in an SVG document)
SVG rendering support is available in all the latest web browsers. Following is the picture representation and code, which shows how SVG is represented in the page source:
<svg version="1.1" width="300" height="200">
<rect width="300" height="200" fill="lightseagreen" stroke-width="6" stroke="teal" />
<circle cx="150" cy="100" r="70" fill="powderblue" />
<text x="150" y="115" font-size="50" text-anchor="middle" fill="steelblue">SVG</text>
SVG was first developed at the World Wide Web Consortium (W3C) in 1999, while version 2 is being used now, following its release in 2016.
Using the Editor for Scalable Vector Graphics
As SVG format is XML-based, examples of simple drawings can be formatted and edited in a plain text editor; however, this path is not visual enough. Moreover, with the increase in the number of objects, it becomes inconvenient, paving the way for vector editors as a convenient and visual solution. You can use any vector graphics editor for the Mac (such as Amadine or Adobe Illustrator) to create SVG images.
Drawing vector graphics can be applied for logo creation or website design on any platform. Creating a beautiful and bright SVG image on your Mac, iPad or iPhone is super easy with the help of vector graphics software like Amadine.
If you own such a tool, drawing scalable vector graphics is much easier than encoding the graphics manually in the text editor. However, should you have a desire to try out the SVG editing in code, you can do it Tryit Editor or read this tutorial.
Advantages of SVG
Note that bitmap (i.e., raster) images are resolution-dependent. Thus, graphics become unpresentable when resized to a certain scale. With vector graphics, such a situation is impossible, since everything is represented by mathematical expressions that are automatically recalculated when zooming. Thus, the quality is always preserved.
Reduce HTTP Requests
Scalable vector graphics can be embedded directly into a Mac HTML document using the SVG tag. In this case, the browser does not need requests to serve graphics. This approach has a positive impact on the loading characteristics of a website.
Styles and Scripts
Easy to Edit and Animate
The File’s Size
When comparing raster and vector graphics, SVG files have an obvious advantage over raster files: they require less memory on any of your devices.
Vector Graphics Formats
For good reason, SVG is the most popular format of vector graphics. However, it is a far cry from being the only format. Following are some other popular and useful formats that work with vector graphics:
- PDF—being a popular Adobe format, PDF has become the de facto standard for the distribution of documents and displaying various printing materials.
- CDR—as with the previous format, this format by CorelDraw also has a wide range of versions. However, every new version is incompatible with older versions and other vector graphics editors and programs.
- DXF—this format is supported by programs like AutoCAD and other similar ones. However, it is rather difficult, so the majority of solutions can read files in it but not save images in it.
- EPS—this is an example of a multi-compatible format; every program supports it to a particular version.
- AI—this format is a creation of Adobe Illustrator. On the one hand, it supports high quality images, but it differentiates with its low compatibility and flexibility.
Disadvantages of SVG for Web
When using complex SVG files for your website pages, remember that the more complicated SVG is, the bigger the file gets, which means it takes significant processing time in the browser, especially for mobile platforms.
SVG is not supported in older browsers, so may not be suitable if you need to support older versions of Internet Explorer with your web site.
The Browser Speed
The browser cannot cache inline SVG
<svg> elements as it would cache regular image assets, so pages that include the image will not load faster after the first page containing the image is loaded. This drawback is successfully eliminated when embedding an SVG via an
Among the vector graphics formats, SVG is an easy and effective way to create vector graphics images using both the Mac and Windows. Its high productivity and compatibility make it a leading contemporary format.