Creative approach to

SVG

by Aga Naplocha
@aganaplocha #CreativeSVG
  • Coolness of SVG
  • Tips & Tricks you should now
  • Make SVG alive by CSS animations
  • Couple of words about accessiblity

Scalable Vector Graphics

SVG

  • Scalable
  • Crisp display
  • Accessible
  • Small filesize
  • Animatable and stylable by CSS
https://github.com/blog/2112-delivering-octicons-with-svg

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)

Styling & Animating
SVG

Tricks & Bugs

about which you should know

Transform origin

CSS rectangle
SVG rectangle

Firefox

A problem with 'transform-origin'

transform-origin:
50% 50%;
transform-origin:
95px 95px;

viewBox

<svg viewBox="0 0 178.6 177" ...>
viewBox = min-x min-y width height

This is happy face.
viewBox="0  0  195  195"
This is happy face.
viewBox="0  0  100  100"
This is happy face.
viewBox="50  50  195  195"
This is happy face.
viewBox="0  0  300  300"
This is happy face.
viewBox="-50  -50  300  300 "
This is happy face.
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>

This is happy face.

Thanks!

@aganaplocha
www.aganaplocha.com