- Scalable
- Crisp display
- Accessible
- Small filesize
- Animatable and stylable by CSS
Tips & Tricks for
Adobe Illustrator
Object > Artboards > Fit to artwork bounds
Create Outlines
<path id="bacon-path" fill="none" stroke="#D3D3D3" stroke-width="6" stroke-miterlimit="10" ...
How to embed SVG
- <img>
- <object>
- <iframe>
- <embed>
- as CSS background
- inline <svg>
how does the
SVG code look like
Code Optimization
- SVG optimiser
by Peter Collingridge
- SVGO (offline)
Tricks & Bugs
about which you should know
Firefox
A problem with 'transform-origin'
transform-origin:
50% 50%;
transform-origin:
95px 95px;
viewBox="0 0 195 195"
viewBox="0 0 100 100"
viewBox="50 50 195 195"
viewBox="0 0 300 300"
viewBox="-50 -50 300 300 "
none viewbox
Keep the viewBox!
Otherwhise your artwork will look strange
Fallback
Browsers that do not support SVG will ignore the <svg> tag
We can add <image src="image.png">
Accessibility & SVG
A very important thing
Useful tags
<title> & <desc>