This document discusses Scalable Vector Graphics (SVG), including basics, gotchas, and optimization. It covers when to use SVG versus other formats like PNG and JPG, how to include SVGs on a website using various methods, and tips for optimizing SVG file size such as using the viewBox attribute and inheriting values. The summary emphasizes that SVG is for vector graphics, HTML and SVG can coexist but don't mix, and to consider file size, complexity, and different embedding options when working with SVGs.

1. Intro to SVG
Basics, Gotchas, and Optimization
@atannerhodges

2. tannerhodges.com/svg

3. Scalable Vector Graphics

4. “How Designers Should Think About SVG” by Peter Nowell

5. https://www.w3.org/TR/SVG11/

6. 8950 4e47 0d0a 1a0a 0000 000d 4948 4452
0000 0064 0000 0064 0806 0000 0070 e295
5400 0000 0467 414d 4100 00b1 8f0b fc61
0500 0001 6d49 4441 5478 01ed d3b1 0d00
200c c4c0 c0fe 3b03 0543 5c61 a4f4 96cd
af99 39ef 7a88 818d 7084 f10d 1404 fb0a
0529 0866 00c3 6921 05c1 0c60 382d a420
9801 0ca7 8514 0433 80e1 b490 8260 0630
9c16 5210 cc00 86d3 420a 8219 c070 5a48
4130 0318 4e0b 2908 6600 c369 2105 c10c
6038 2da4 2098 010c a785 1404 3380 e1b4
9082 6006 309c 1652 10cc 0086 d342 0a82
19c0 705a 4841 3003 184e 0b29 0866 00c3
6921 05c1 0c60 382d a420 9801 0ca7 8514
0433 80e1 b490 8260 0630 9c16 5210 cc00
?

7. <svg>
<rect width="100" height="100"/>
</svg>
?

8. <svg>
<rect width="100" height="100"/>
</svg>
?

9. <svg>
<rect width="100" height="100"/>
</svg>

10. <svg>
<rect width="100" height="100"/>
</svg>
fill="black"

11. <svg>
<rect width="100" height="100"/>
</svg>
fill="black"
stroke="none"

12. <svg>
<rect width="100" height="100"/>
</svg>
fill="black"
stroke="none" stroke-width="1"

13. <svg>
<rect width="100" height="100"/>
</svg>
fill="none"
stroke="black" stroke-width="1"

14. CodePen Challenge
Black → Red

15. ✅ Wins
• Easy to read/write
• Live in HTML document
• CSS can change
presentation
⚠ Warnings
• HTML inside SVG breaks
• SVG doesn’t inherit size
from children
• SVG needs viewBox to
scale
SVG + HTML

16. ✅ Wins
• fill can inherit
• currentColor pulls value
from color
⚠ Warnings
• Inline attributes override
inherited styles
• Direct selectors override
inline attributes
• Selector > Inline > Inherit
SVG + CSS

17. SVG Sizing
✅ ❌
viewBox, width, height 300 x 150
viewBox width, height 100%
width, height viewBox Crop to fit
viewBox, width, height Scale to fit

18. SVG needs viewBox to scale
SVG != HTML
External images require
xmlns="http://www.w3.org/2000/svg"
tl;dr📚

19. •When is SVG better than PNG?
•How do I export SVGs from Sketch?
•How do I include SVGs on my website?
But what about…🤔

31. 63KB?? 🤔

32. 63KB?? 🤔
5.2MB?? 😱

37. ❌ Bitmap
✅ Vector

38. 63KB?? 🤔

43. PNG!

44. But seriously, PNG is 👌

45. But seriously, PNG is 👌
WebP is even better!

46. https://pngmini.com / https://imageoptim.com
Optimize PNG / JPG

48. 😱

49. ❌ Text
✅ Outline

51. https://github.com/svg/svgo
Optimize SVG

52. https://github.com/svg/svgo
Command
Line Tool
Optimize SVG

53. SVGOMG
https://github.com/svg/svgo / https://jakearchibald.github.io/svgomg
Web App
Optimize SVG

61. SVG: 3KB*
JPG: 88KB PNG: 4KB
*SVG is gzipped

62. 1. If you have a vector asset, try SVG first
2. If SVG file size is too large, use PNG*
3. If transparency doesn’t matter, use JPG*
Rules of Thumb👍
*Use WebP too!

63. Embed Options
•Inline <svg>
•External <img src="">
•Sprite Map <svg><use xlink:href=""></svg>
•CSS background-image

64. Inline <svg>
✅ Pros
• Loads immediately
• Can manipulate
• Accessible*
❌ Cons
• Bloat
• Duplication†
†Unless you manage your markup with
reusable components.
*Assuming you include a <title> / <desc>,
or at least some <text>.

65. External <img src="">
✅ Pros
• Simple
• External SVGs are cached*
❌ Cons
• Can’t manipulate
*Requires XML namespace attribute:
xmlns="http://www.w3.org/2000/svg"

66. Sprite Map <use>
✅ Pros
• Reusable
• External SVGs are cached*
• Works inline & external
• Can manipulate†
❌ Cons
• Can’t animate†
• Can’t use cross-domain,
CORS
*Requires XML namespace attribute:
xmlns="http://www.w3.org/2000/svg"
†Can’t animate, but can still adjust colors.
Great opportunity for CSS Variables.

67. CSS background-image
✅ Pros
• Reusable
• Clean markup
• External CSS is cached*†
❌ Cons
• Bloat†
• Can’t manipulate
*Requires XML namespace attribute:
xmlns="http://www.w3.org/2000/svg"
†If you encode your image as a data URI,
make sure you encode special characters

68. 🔥 Summary 🔥
• SVG = Scalable Vector Graphics
• Bitmaps store pixels, Vectors store paths
• HTML and SVG are similar but different (they can coexist but don’t mix)
• viewBox defines an SVG’s artboard and allows it to scale
• Take advantage of inherited values (e.g., fill: currentColor)
• Watch out for base64 bitmaps, shape complexity, and text layers
• Use SVGs for vector, PNG when they’re too big, and JPG for the rest
• Use WebP too!
• Include SVGs with <svg>, <img>, <use>, and background-image

69. Thank You
tannerhodges.com/svg
@atannerhodges