What Are Scalable Vector Graphics

Scalable Vector Graphics format is a sign system for describing two-dimensional graphic images in XML format. The word “vector” in the title indicates a fundamental difference from raster graphics formats, such as GIF or PNG, in which a matrix of pixels defines the image. Additionally, SVG supports interactivity and animation.

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.

Comparison of SVG (vector) and PNG (raster) graphics on Amadine illustration

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>
SVG

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 a Mac. Creating a beautiful and bright SVG image on a Mac 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

Resolution Independence

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

Embedding with the SVG tag also makes it easy to define styles for graphics through the use of CSS. You can smoothly change the properties of an object (e.g., background color, frames, transparency, etc.). Similarly, you can manipulate graphics when using JavaScript on a Mac.

Easy to Edit and Animate

SVG objects can be animated through the use of CSS or JavaScript and can also be modified in a text editor. For instance, Amadine for Mac has a great suite of tools to make vector graphics images quickly and qualitatively.

The File’s Size

When comparing raster and vector graphics, SVG files have an obvious advantage over raster files: they require less memory on a Mac.

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 on a Mac:

  • 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 for the Mac.
  • 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 on the Mac.
  • 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.
The illustration of different available vector formats

Disadvantages of SVG for Web

Size Issue

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.

Continuity Absence

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 <img> element.

Conclusion

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.

Interested in an easy-to-use SVG solution for your Mac?

Try out Amadine, the all-in-one vector graphics app for Mac!