Slides: http://slides.com/sarasoueidan/tips-for-avoiding-common-svg-pitfalls#/

Applause to Marc for fixing the VISA issues.

I’m here to talk about SVG. Like PPK did yesterday, I’m here to crush your soul today.

I love SVG. Not because it’s the new hot thing, but because it fascinates me. I have always loved drawing and illustrations.
I was fascinated about SVG as soon as I found out about it. when I started to code looked familiar. It looked like HTML, but it is fundamentally different. So today I will give you some tips to avoid headaches I had.

#1
Presentation attribute are like regular HTML attributes but intended for styling, for example: fill, stroke, etc. But they are overridden by any other declarations.

Use element references on a different element like a symbol.
If you do not apply any styles, the browser will use the defaults.

svg * {all: inherit; } This is an extreme measure, as it will reset all styles on the elements. Only use it if you’ll style everything.

With SVG you can use variables. Define them in CSS with –coll and reference them (with –coll) in SVG.

#2
There are 6 different ways to embed SVG: <svg>, <embed>, <iframe>, <object>, css background, and <img>.
Recently the <picture> element was added to this list.

Pages with targets open in the same part. use xlink:target to fix it. But you need to set the namespace first.

#3 Setting the fill property to “none” disables pointer attributes.
Use fill:transparent; or change the value of pointer events.

#4
<script xlink:href> Values in  the script like <,>,& will sometimes be interpreted as HTML. Use CDATA to fix it.

#5 SVG viewbox attribute

SVG has a limit in width and height, just like an iframe. But can have a different width/height inside of the view. This scales the SVG.
Clip it with clip-width that equals width of element.

#6
CSSOM (CSS Object Model) methods on SVG give unexpected results. Use SVG functions instead.

#7 SVG lacks relative positioning.
No z-index, everything is absolute positioned. If you want to overlay things, the order of objects needs to be changed in the source.
SVG doesn’t have a box model
You can fake overlaying by nesting <svg> tags.

#8 Sizes in editors and generated tools won’t always be right in SVG. Needs a bit of modification. error-prone.