If you're like me, you may have recently realized you know almost nothing about SVGs.

Let's fix that!

Scalable
Vector
Graphics

SVGs are vector graphics declared using XML.

Why should we
use them?

• Small file sizes
• High quality
• Scalable without loss in quality

Browser Support

Things to remember when exporting

• Object > Artboards > Fit to Selected Art
• Named Layers = IDs

Things to avoid in Illustrator

• Blurred drop shadows
• 3D effects
• Blend modes
• Complex paths

In Illustrator

• Outline text
• Removing unwanted groups
• Pathfinder > Unite

Optimize after exporting

• SVGO - Node.js based command line tool
  (https://github.com/svg/svgo)
• SVGOMG! - online tool powered by SVGO
  (https://jakearchibald.github.io/svgomg/)
• SVG GUI - GUI for SVGO
  (https://github.com/svg/svgo-gui)
• SVG Editor - online tool
  (http://petercollingridge.appspot.com/svg-editor)
• grunt-svgmin - Grunt task for using SVGO
  (https://github.com/sindresorhus/grunt-svgmin)

Advantage to SVGOMG! and SVG Editor is that you can preview the output

Use as an img

Browser Support: http://caniuse.com/#feat=svg-img

Use as a background-image

.coffee {
  background: url(resources/coffee-pot.svg) no-repeat;
  background-size: 100px;
  width: 100px;
  height: 100px;
}

Browser Support: http://caniuse.com/#feat=svg-css

Use Inline

Using SVG as an object

Browser Support: http://caniuse.com/#feat=svg

Using Data URIs

div {
	background: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJjb2ZmZWUtcG90IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iLTExNSA4LjggOTAgODIuMyIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAtMTE1IDguOCA5MCA4Mi4zIiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iMTAwcHgiPg0KPHBhdGggaWQ9ImdsYXNzIiBmaWxsPSIjQ0RFQkY0IiBkPSJNLTk5LjUsMzUuNmMtNy43LDYuNS0xMi4zLDE2LjItMTIuMywyNi4zYzAsNy4zLDMuMiwxMy42LDkuMiwxOC4zYzYsNC43LDE0LjQsNy4zLDIzLjYsNy4zDQoJYzkuMiwwLDE3LjUtMi42LDIzLjYtNy4zYzYtNC43LDkuMi0xMSw5LjItMTguM2MwLTEwLjQtNC44LTIwLjMtMTIuOC0yNi44Yy0wLjYtMC41LTItMS41LTQuNS0xLjVjLTIuNSwwLTI3LjcsMC0zMC44LDANCglDLTk3LjUsMzMuNi05OC43LDM0LjktOTkuNSwzNS42eiIvPg0KPHBhdGggZD0iTS0yNS41LDQ4LjNjLTMuMS04LTkuNC0yMC42LTEzLjEtMjguOWMtMC44LTEuOC0wLjktOC41LTMuMS05LjRjLTIuMi0xLTYuNywyLjItMTMuNiwyLjNjLTEuOSwyLjItNC42LDYuMy01LjgsOA0KCWMtMC4yLTAuNS0wLjctMC45LTEuMi0wLjloLTAuNXYtNS4zYzAtMC4zLTAuMy0wLjYtMC42LTAuNmMwLDAtMzIuMy00LjQtMzQuNC00LjdjLTIuMS0wLjMtMS45LDEuMy0xLjcsMS42bDQuNyw5aC0wLjINCgljLTAuNywwLTEuMywwLjYtMS4zLDEuNGwtMS40LDguMWMwLDAuOCwwLjYsMS41LDEuNSwxLjVoLTAuM2MtMC4zLDAtMC41LTAuMS0wLjctMC4yYy0xMC42LDYuNi0xNy42LDE4LjYtMTcuNiwzMS44DQoJYzAsMTcuNSwxNi4xLDI5LjEsMzYsMjkuMWMxOS45LDAsMzYtMTEuNiwzNi0yOS4xYzAtMTMuMS03LTI1LjEtMTcuNS0zMS43YzAuNS0wLjIsMC45LTAuNywwLjktMS4zbC0wLjItMS4xYzIuNi0xLjcsNy00LjYsOC4zLTUuNw0KCWMxLjgtMS41LDUuNC0yLjQsNy40LDJjMS4yLDIuNSw3LjEsMTgsMTMuNywyNS41YzEuMiwxLjQsMi43LDIuMSw0LjEsMi4xQy0yNS43LDUxLjktMjQuMyw1MS41LTI1LjUsNDguM3ogTS01OS44LDM2LjMNCgljNy43LDYuMiwxMi40LDE1LjgsMTIuNCwyNS44YzAsNy0zLjEsMTMuMi04LjksMTcuN2MtNS44LDQuNi0xMy45LDcuMS0yMi44LDcuMWMtOC44LDAtMTYuOS0yLjUtMjIuOC03LjENCgljLTUuOC00LjUtOC45LTEwLjYtOC45LTE3LjdjMC05LjgsNC41LTE5LjEsMTEuOS0yNS40YzAuOC0wLjcsMi0xLjksNS0xLjlzMjcuMywwLDI5LjcsMEMtNjEuNywzNC44LTYwLjQsMzUuNy01OS44LDM2LjN6Ii8+DQo8cGF0aCBjbGFzcz0ibGlxdWlkIiBmaWxsPSIjNEMzNzIzIiBkPSJNLTEwOC4yLDYxLjhjMCwwLjEsMCwwLjIsMCwwLjNjMCw2LjMsMi43LDExLjcsNy45LDE1LjhjNS40LDQuMiwxMyw2LjYsMjEuMyw2LjYNCgljOC4zLDAsMTUuOS0yLjMsMjEuMy02LjZjNS4yLTQuMSw3LjktOS41LDcuOS0xNS44YzAtMC4xLDAtMC4yLDAtMC4zSC0xMDguMnoiLz4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0tNjEuNywzOWMtMi41LTEuMi0zLTAuNi0xLDEuNGMwLDAsMy4xLDMuMSw0LjIsOGMxLjEsNC45LTAuNCw5LTAuNCw5Yy0wLjksMi42LTAuMiwzLDEuNSwwLjkNCgljMCwwLDQuMS00LjksMi44LTEwLjhDLTU1LjksNDEuOC02MS43LDM5LTYxLjcsMzl6Ii8+DQo8L3N2Zz4=');
}

Drag and drop URI Converter
(http://jpillora.com/base64-encoder/)

Browser Support: http://caniuse.com/#feat=datauri

Defs and Use

Store elements with defs and reuse elements with use

Defs and Use

defs can be defined at the top of the body

and reused later on with use

Reference defs from an
external file

Reference defs from an
external file

• Allows caching
• More organized
• Less files
• Does not work in IE11 :-(

Fallbacks
(http://css-tricks.com/svg-use-external-source/)

You can use CSS to manipulate your SVGs

Inline

In a style element

Example
(http://codepen.io/MongooseDoom/full/NPbdVG/)

In an external stylesheet

#coffee-pot-external .liquid {
  fill: #ea7373;
}

Media Queries

A style tag can be added to an svg file with media queries included. These media queries refer to the size of the SVG viewport. With an img tag, (width: 30em) would apply styles to the SVG when the img is 30em wide.

Example
(http://tympanus.net/Tutorials/ResponsiveSVGs/index6.html)

Resources

• Sara Soueidan
  (http://sarasoueidan.com/articles/index.html)
• CSS Tricks SVG Mega List
  (http://css-tricks.com/mega-list-svg-information/)
• Making Svgs Responsive With CSS
  (http://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/)
• How to Add Scalable Vector Graphics to Your Web Page
  (http://www.sitepoint.com/add-svg-to-web-page/)