The use of Scalar Vector Graphics (SVG) on the web has had a meteoric rise in usability over the past decade, and has quickly become a favorite for web elements because of their responsiveness, their ability to stay sharp regardless of zoom level or device resolution, and their capacity for animation on the web.

Having first been developed in 1999, SVG graphics were not always well supported in browsers. that said, they have now have developed a robust amount of browser support. In this post, we will cover SVG fundamentals that will be helpful for ensuing tutorials.

Overview

  • What is an SVG?
  • Creating and editing an SVG
  • Standalone SVGs versus SVGs embedded in webpages
  • SVG’s, CSS, and JS

What is an SVG?

SVG’s maintain their sharpness regardless of their size.

Because SVG’s are made up of lines and shapes drawn mathematically, they do not lose quality when magnified like their pixel-based counterparts that are coded in bitmaps, such as JPG, PNG, and GIF. Look at how this SVG is rendered. Compare this SVG to a PNG graphic.

(Image examples)

Now let’s enlarge them both. Notice that the SVG doesn’t lose any quality.

(Image examples)

SVG’s are made up of one or more shapes drawn mathematically in code.

You will see some code samples in the SVG tutorials code examples for drawing SVG graphics. The code is actually a set of commands for various types of lines that fit to particular types of math functions, such as linear, quadratic, and cubic, as well as shapes, such as circles.

Creating and Editing SVGs

Image Editors like Adobe Illustrator and Inkscape can output SVG graphics.

Image applications like Illustrator and Inkscape can output SVG graphics that maintain color, layer order, positioning, and other properties. In many cases, meta data is left in the file that can be stripped out either via export settings or after the fact in a text editor. Just be careful about the settings and make sure you test when you open them up in a browser.

SVG’s can be opened in both a browser window and a text editor.

Because SVG’s are drawn in code, they can be opened up in a text Editor like TextEdit, Notepad, TextWrangler or Sublime Text, and edited directly there.

Standalone SVG files

While my SVG tutorials mainly involve SVG elements embeded in an HTML document, SVG code can also exist in its own file as the file’s “root element.” The URLs to SVG files can then be used as src attributes for img elements.

You could theoretically complete at least parts of the ensuing tutorials by drawing directly on an SVG document. If you do that, your SVG element is the “root” of your document and should have these attributes:

You will notice in this above sample snippet that SVG’s have their own document object model (DOM), consisting of a root element and sub-elements like an HTML file.

As with other image types, I rarely if ever am directed to standalone SVGs on the web — normally they are embedded in a page via an img element or CSS background property, which I cover below - but it is nice to be able to open them sometimes and see how they look by themselves in a browser.

Using standalone SVG’s as the src of an img element

As with GIFs, JPGs, and PNGs, standalone SVG’s can be used as images. Below is how you might use an SVG as an image’s src attribute an HTML file. You simply add an SVG’s filename to the src attribute of an img element in the markup in the same way you would with a PNG, GIF, or JPG.

  • The upside is less markup in your document page. With an embedded SVG, the markup can become especially obtrusive if the SVG is very large and complex.
  • The downside is that you cannot use CSS and JS to reach in and style or animate circles, paths, ellipses, and other elements of an SVG.

Now I will say that I do use a standalone SVG for this site’s dragon banner. I chose to not embed it because I did not want to animate it at this point, and instead wanted to focus on CSS positioning. It is also a very large and complex SVG and I wanted to keep my markup code unobtrusive.

As with other image file types, using an SVG as the src attribute of an image does have the penalty of an additional server request, so depending on connection speed our intrepid website visitor may need to wait for just a fraction of a second before that dragon shows up.

If I ever wanted to animate specific parts of it, I would most likely add it with Javascript somehow. This would keep all that SVG code from cluttering my page, but by adding it dynamically as an inline SVG, I would still be able to, say, make its wings flap, its head, arms, and legs move, or its mouth breathe fire.

SVG as a background image within CSS

SVG can be used as a background image of an element via CSS. This allows you to use other properties:

  • background-repeat
  • background-size
  • background-position

Note that background-repeat only works if background-size is not set to a percentage. While I was considering making the clouds repeat in my dragon banner, I dropped this idea in favor of using a percentage for background-size so that the clouds would scale based on browser width.

While backgrounds are not the only solution for this, I could see the background image method being useful for creating repeating images or patterns. For instance, I could theoretically use a single mountain image and then use background-repeat: repeat-x to create some repeating mountains under the dragon.

Inline SVG’s

SVG’s could also be embedded in an HTML page as an inline SVG. This eliminates the need for an HTTP request since all the image info is in the DOM. It is also super powerful because you now have the ability to manipulate different elements of the SVG with CSS and JS.

Here is a super-small HTML page with the SVG, and the link to the page can be found here.

While this adds more code to your HTML page, I usually take this approach right now so the sub-elements of an SVG can be more easily animated with Javascript and CSS.

Because the SVGs in my SVG demos are intended to be dropped into an HTML page and manipulated with CSS, you will see code looking more like the SVG part of the second example, with version, baseProfile, and xlmns attributes dropped out.

For more information, check out the W3Schools SVG reference.

For a complete course on SVG, check out Chris Coiyer’s course on Everything you need to know about SVG on CSS-Tricks.

SVG and CSS

If an SVG code is put directly into an HTML page then its sub elements, such as path, circle, and line, can be manipulated with CSS and Javascript. This is highly useful for keeping properties like fill and stroke uniform, as well as animating their subpaths.

I have a quick, simple example of how I control an SVG with CSS at the end of Drawing a Circle with SVG. The post is then recapped in Drawing a Face with SVG, as the HTML and CSS is then used as a basis for starting the face.

Key Takeaways

  • SVG’s maintain their sharpness regardless of their size.
  • SVG’s are made up of one or more shapes or lines drawn in code.
  • Image Editors like Adobe Illustrator can output SVG graphics.
  • SVG’s can be opened in both a browser window and a text editor.
  • SVG’s have their own document object model (DOM), consisting of a root element and sub-elements like an HTML file.
  • SVG code can either exist in its own file as the file’s root element or they can exist within an HTML document.
  • SVG’s respond to CSS.