Best Practices for Working with SVGs

For the past several years I’ve been working with SVGs — a lot. Not surprising to myself, I quickly fell in love with them for all the reasons I love vector art. I have come up with several tricks to get lean, highly manageable SVGs that I want to share with you here.

Creating SVGs

Artboard = viewBox

TIP: In Illustrator, your artboard size directly translates to the SVG viewBox size. In Sketch, your viewBox will be calculated by the height and width of the items you have selected to export.

Develop a grid

TIP: Don’t forget to remove the grid layer before you export.

Naming

TIP: If the program you use to create your SVGs doesn’t capture the main grouping layer name, like Sketch, you can add this in later once you are looking at the code.

Check stroke size

TIP: You can have strokes in SVGs, but I’ve found it is easier to control shapes over strokes when styling and animating.

Using color

TIP: The transition to color can be visible on screen and will look like your logo or icon is fading in.

Using gradients

TIP: Adjust the gradient angle for more realistic shadows.

Combine shapes

TIP: After merging paths, ungroup and rename your layer.

No grouped objects

TIP: That said, it can be easier to keep outlined text (like logo text) that is all the same color grouped for ease of control.

Name all layers

TIP: After you export you can add class selectors in a code editor to all of the ID selectors. I prefer to use classes so that I can use one style declaration, like .suit-color and apply it to multiple elements in the SVG.

Exporting SVGs

Exporting Checklist

  • In Illustrator, make sure you named the grouping layer as discussed above
  • Make sure you named all of your individual layers
  • Outline all strokes
  • Outline text
  • Convert all solid colored objects (not gradients) to #000000 black or #FFFFFF white
  • If you have a grid layer, delete it
  • Export your SVG

Use an SVG optimizer

TIP: Once you have tweaked the settings to your liking and downloaded the optimized SVG, take a screenshot of your settings to refer to later.

Getting into the code

  • Make sure the viewBox is still the same size as intended
  • Make sure there is a unique ID selector on the svg container
  • Add classes to every path that you need to control from your stylesheet, for example add class=”shoe-color” for paths that have selector id=”shoe-right-color” and the path that has id=”shoe-left-color”. These ID names come from how you named your layers in the program you created your SVG with.

Using SVGs

  1. Just like any other graphic format, display the SVG with the <image> tag
  2. Within your stylesheet, display the SVG as a background-image

Both of these options limit you to needing internal, embedded styles in your SVG to color the graphic and the only control you have over the graphic in CSS is related to sizing.

The <object> tag offers similar drawbacks as the <image> tag and CSS background-image methods, but with <object> you can include a link to a stylesheet within the SVG, giving you full styling control. The downside to this is that if you change stylesheets in the future, or your stylesheet gets renamed, you will need to remember to make that change within your SVG file as well.

TIP: More details on this from Chris Coyer at CSS-Tricks.

Inlining SVGs

TIP: For better management of your SVGs, work with them in their own file, then select all and paste into your HTML file.

Closing

What are some of your best SVG best practices? Leave a comment below.

Originally published at https://www.bitovi.com on July 17, 2018.

--

--

Ryan is a seasoned User Experience Generalist. He has been working in user-centered design for over 20 years, has a MS & PhD in HCI & an MFA in Graphic Design.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ryan G. Wilson

Ryan is a seasoned User Experience Generalist. He has been working in user-centered design for over 20 years, has a MS & PhD in HCI & an MFA in Graphic Design.