We recently improved and added several new sections to our site. Throughout the design process, I had in mind the large variety of different browser types, image types and screen resolutions that would be available to view the site. I decided to design multiple graphics in Illustrator and save them as SVG. The SVG format retains pixel density at any scale. This means your images will always look crisp and clean when viewing them. You can scale up or down and never lose the integrity of the image. If you have to support <= IE8, SVGs may not always work well for you, although fallbacks can be provided to help in these situations. (An excellent source for fallbacks on css-tricks.) With the additions of retina displays, 4k, and now 5k displays, using scalable vector graphics (SVG) is the most logical choice.

The following is a brief overview of the different techniques available for adding, creating and animating SVGs.

##Putting SVG’s on the page There are several ways to get an svg on to a page. You can use the <img>, <embed>, <object>, <iframe>, background-image, or a direct embed of the xml. I will only cover a few of these options.

###svg in <img>

<img src=“path/to/svg.svg”>

Pros: This seems to be the quickest way to get your svg on to the page. Acts just like you would expect. Can embed SMIL. (more on this later, it is being used for this post's image to animate.)

Cons: Can not use js or css to change elements within the svg.

---

###svg in <object>

<object src=“path/to/svg.svg” type=“images/svg+xml”></object>

Pros: A fallback within the object tag using for browsers that will not render svg. JS and css can be used to manipulate the svg.

Cons: Some browsers will download both versions of the file.

---

###svg as background-image .svg { background-image: url(../path/to/svg.svg); }

Pros: Easy to use. Can provide fallback image.

Cons: Js and css can not be used to manipulate.

---

###Direct embed This is referring to direct embedding of the xml into an <svg> tag.

Pro: Cuts down on http requests. Can style with css and js directly.

Con: Creates a really messy page.

---

##SVG Layout Everything in SVGs are based on a coordinate system. Creating the SVG from a vector graphics program, suchs as Illustrator, will handle these coordinates for you. However, it is good to know:

• `viewBox` - Shifts view in x or y and controls zoom level `viewBox=“x y width height”`
• `preserveAspectRatio` - Allows squeeze and stretch of the image.

##Spriting It is fairly easy to sprite your svg’s. One option is to open your vector editor, set up your SVGs on the canvas and group each image so its easy to find. If using Illustrator to create the images, hit "save as" and then select SVG. At this point, you can save your file as an SVG to a location or, if directly embedding, click “Show SVG Code…” and view the code to copy and paste directly into your html. I recommend that you wrap all of your separate images in <symbol> tags and give them an id for reference in the html.

Below is an example that has an SVG defined at the top of the html with a display none to get it embedded on the page. Each id is used later within the document with: <svg><use xlink:href="#circle-1" /></svg>

You can also use an external asset to achieve the same effect: <svg><use xlink:href=“path/to/svg#id-of-symbol” /></svg>

Or even provide a new viewBox for that particular image, which can shrink or grow the image: <svg><use xlink:href=“#id-of-symbol(viewBox(100, 100, 200, 200))” /></svg> But keep in mind that individual instances can not be styled.

##Spriting made easy You can also use several tools that will automatically create the sprite from a folder of SVG’s. For this case, I used https://github.com/FWeinb/grunt-svgstore. This gave me a nice SVG with id’s that are created from the file’s name. This makes things really easy!

##Animating SVGs Animations on SVG elements can be made directly with javascript. There are also many SVG animation libraries that can help you make animations easier. http://snapsvg.io/ is an animation library that makes it easy to to embed and animate SVGs.

##Using SMIL SVG has its own animation abilities called SMIL (Synchronized Multimedia Integration Language). Although I find using a library easier, its good to know that this exists. This is animations that are built in XML. Take a look at the source below for a quick example. You will see that there is an <animate> and <animateMotion> tag at the end of the SVG markup. The <animate> uses the attributeName to decide what to animate with the from and to telling the animation which colors to change to. <animateMotion> occurs on click in the case below. You can define a path it will travel on or you can reference another svg element by id like so:

<animateMotion dur="6s" repeatCount="5"><mpath xlink:href="#the-circle"/></animateMotion>