Do Not be afraid of SVG

Utilize It On Your Web Today

Marek Raida @xrevelon

Scalable Vector Graphics

• W3C approved standard since 1999
• focused on 2D vector space
• vectors = super quality and good performance for every screen resolution
• HTML5, CSS and JS friendly
• XML based markup (even when part of HTML5 document!)
• DOM based with well supported event model
• nicely supported, even in MSIE 9+ (fallbacks possible)
• accessible (role attribute, title/desc tags)

How to create SVG

• manually (just like you do HTML and CSS, man…)

• vector editor like Illustrator or Inkscape
• online editor like YouiDraw or SVG-Edit
• download and utilize tons of documents from internet (Google search = filetype:svg)
• generate it via scripting

PS: And do not forget to serve it as image/svg+xml MIME type

SVG Basics

• shape primitives: path, line, rect, circle, ellipse, polyline, polygon…
• organization: defs, g, svg, use, a, symbol, image, foreignObject…
• advanced: marker, pattern, clipPath, mask, gradient, filter…
• texts: text, tspan, textPath…
• animations: set, animate, animateTransform, animateMotion  (SMIL) 

viewPort vs viewBox

SVG canvas is infinite. ViewPort is defined by width and height and is internally for percentage sizing use + it gives document's parent (HTML, SVG) its desired dimensions

  <svg width="200" height="200"><!-- content --></svg>

ViewBox is defined by viewBox and defines document's canvas visibility box. Use it a lot, I do! Four values stand for definition of: left top width height frame

  <svg viewBox="-50 -50 200 200"><!-- content --></svg>

No one of them is mandatory, but they are very useful and they can co-exists easily, if you want or need to

  <svg viewBox="-50 -50 200 200" width="100" height="100"><!-- … --></svg>

Integration ways

There are many ways how to integrate SVG in your web project (page). I recommend to stick to these ones:

1. inline svg markup
2. object tag
3. image (img) tag
4. CSS background property
5. iframe

Internal Media Queries

Embed your media queries inside SVG = put it where it belongs! (OOP Encapsulation, proven practice)

HTML vs SVG differences

There are many SVG only CSS properties and all of them (and more) could be written as direct presentation attributes, but probably the most notable are:

Is CSS drawing good enough?

Example of (not only) Twitter logo recreated in HTML/CSS and crushed to the minimum size (single color image only)

JS manipulations

<input onchange="document.getElementById('txt').firstChild.data=this.value">

<svg width="310" height="120">
  <path id="crc" stroke="none" fill="none" d="M50,0c0,27.6-22.4,50-50,50s-50-22.4-50-50,22.4-50,50-50,50,22.4,50,50z"/>
  <g transform="translate(150 60) scale(2 0.8)">
    <text font-size="26px" font-family="sans-serif" fill="green">
      <textPath xlink:href="#crc" id="txt">Text Writ Around The Circle</textPath>
      <animateTransform attributeName="transform" type="rotate" from="0" to="360" begin="click" repeatCount="1" dur="9s"/>
    </text>
  </g>
</svg>           

Understanding path

Substitutes every other shape. Some available commands:

• M = Move To X,Y (applied from current position)
• L = Line To X,Y (the same for all commands…)
• C = Cubic Bézier To x1,y1 x2,y2 X,Y
• Z = Close Path (to the starting point, exception ;-)

Notice two Control Points in curve command.

Use reflections

use tag creates live reflection of any existing node. It not only saves lines of code, but can do true miracles!!

  <g id="complexElementID" class="…">
    <circle …/> <rect …/> <text …/> <path id="somePathID" …/>
  </g>
  <use xlink:href="#complexElementID" transform="scale(2)" class="c1…"/>
  <g class="whatever">
    <use xlink:href="#complexElementID" transform="scale(5)" class="c2…"/>
    <use xlink:href="#somePathID" transform="rotate(180)" class="c3…"/>
  </g>           

References are using xlink:href="#refID" syntax.

Best SVG utilization

You know it already, I know, but just to be sure ;-)

1. maps of countries, regions even world
2. graphs, diagrams and data visualizations
3. technical plans and drawings
4. interactive infographics
5. colorful icons, superior to icon fonts
6. and off course - responsive images ;-)

Pumpkin Carving

<mask id="myMask"/>
<g id="pumpkin">…several paths there…</g>
<script>
  var carving;
  pumpkin.onmousedown = function(evt) {
    carving = document.createElement('path');
    myMask.appendChild(carving);
  }
  pumpkin.onmousemove = function(evt) {
    carving.setAttribute('d', carving.getAttribute('d') + 
      " " + evt.clientX + " " + evt.clientY);
  }                 

Website logo story

• original logo (3kB, 33 elements, antialiasing rendering issues)
• shape-rendering:crispEdges
  (3kB, 33 elements, hmmm, different rendering issues)
• stroke-width:0.09; stroke-linejoin:bevel (2kB, 30 elements, coords rewritten, result is OK, but, hmmm, inaccurate)
• text paths merged (2kB, 23 elements, coords rewritten, only filesize optimization, still inaccurate)
• symbol rewritten to three overlapping paths (1.5kB, 5 elements, good enough result - Done)

Shape Morphing

  <path    d="M5,5 L10,10 15,20 50,33…>
    <animate attributeName="d" dur="10s" start="0s" repeatCount="indefinite"
      values="M15,10 L5,5 17,30 7,20…;
              M15,10 L2,2 70,11 8,42…" />
  </path> (Batman Logo Evolution by Tavmjong Bah, M$ incompatible)
                 

Limitations (= M$)

MSIE/Edge doesn't support CSS Transformations to SVG content, so direct tag attributes have to be used.

MSIE also doesn't support CSS Transitions and Animations of otherwise supported SVG related CSS properties - latest Edge does?, which leaves us with reasonable utilization of only one property: opacity.

They are also the only browsers not supporting SMIL Animation, so putting SVG in motion is not so easy.

Scripting and tools could solve these issues, but it's a pity.

My recommendations

Following exceptional and wise people and sophisticated tools are great to learn from or definitely worth trying:

• Chris Coyier
• Sara Soueidan
• Mike Bostock
• David Dailey
• MDN
• D. Baranovski,GreenSock
• Peter Collingridge
• Grunticon / Grumpicon vs. Font Blast

Do not worry about

1. MSIE 8 and lower are declining rapidly, having share from 1.5% to 12% respectively
2. desktop browsers are declining anyway and all major mobile ones render SVG more than well
3. elder Android versions without SVG, like Gingerbread are dying even faster
4. performance, as long as you do not have SVG documents with thousands of complex paths, is good
5. it's a living standard, evolving and used more and more

Bits of the Future

• new star basic primitive
• mesh gradients for complex artworks
• Catmull-Rom path type and better canvas integration
• markerSegment property, markerPattern
• paintOrder property for fill/stroke
• non-scaling-stroke vector option (CAD drawings)
• Web Animations as SMIL API replacement
• and M$ Edge is hurrying to catch the train

Learn it and love it, SVG will not let you down!

THE END?

Thank you!