RWD Summit: RWD & SVG

In his RWD & SVG talk at RWD Summit in March 2016, Dudley Storey shares his thoughts on working with Scalable Vector Graphics for Responsive Web Design, especially on logos and icons. Here are my notes from his talk:

There are five rules when designing icons and logos in SVG:

1. Design & build SVG icons&logos at the aprox target px for the screens (~50x50px for icons, as needed for logos)
2. Set up your illustration tool to help solve issues before they happen: 
   • Strokes in the middle of paths
   • Exporting styles as CSS
   • Use Boolean paths rather than superimposed layers
   • SVG filters and not illustrator’s one (if illustrator)
3. Draw icons 1px in from the edge of the viewBox to allow for browser’s tendency to fractionally bloat SVG with antialiasing, which can be cut off if you draw too close to the edges 
   • Optimize the SVG to remove redundant code
   • SVGOMG
   • Adobe Illustrator 2015.2
   • Sketch Beta 3
4. Since SVG is a replaced HTML element, linked CSS that does not load will leave an SVG element rendered at 300x150px by default. Icons should have fallback width and height attributes:
5. Deal with IE 
   • It sets height for the SVG applied as a 150px height and 100% width creating distortion. You can use img {width: 100%;} or safer with img[src$=“.svg”] { width: 100%}
   • Inline SVGs require a container element and a “padding hack”