UX Design and Development course

Using SVG

Source

SVG is an image format for vector graphics. It literally means Scalable Vector Graphics. Basically, what you work with in Adobe Illustrator. You can use SVG on the web pretty easily, but there is plenty you should know.

A great article from CSS-Tricks that goes into great depth to illustrate how SVGs work, why you should and how you can effectively use them in your projects.

Just know this, SVGs are the web version of Illustrator's EPS file. Create one vector based image and use it in multiple ways and sizes. It's only limitation is what you can do with it in CSS, but the ability for reuse greatly negates that one aspect.

Keep reading ...

Gist as example

Checkout this example on SassMeister that will illustrate the flexibility of SVGs. Simply edit the code to update the width and height of the asset's containing block element. Watch how the asset retains it's sharpness at the different sizes.

sassmeister.com/gist/9612570