logo dotConferences

Using CSS with SVG is a great adventure full of magic, friendship and sometimes… creepy villains! Jump in and discover why you should tell the world that CSS and SVG are forever best friends.


To see the slides, you can click here

More details

Full transcript:

  • Let me tell you a story.
  • So… Once upon a time
  • There was a tiny, lonely, gloomy SVG square.
  • Nobody really liked it. It felt quite miserable.
  • Fortunately, it had a good friend called CSS to cheer it up!
  • And along the years SVG taught many tricks to CSS.
  • They can do really crazy stuff and that whole friendship they have it was really awesome. They really liked each other.
  • So… Okay, I have a good idea what you gonna say:
  • This is not one square, there is something else. This is not possible with one square.
  • Well... Actually there is one square.
  • It's just that SVG has powers of its own and among them… I can reuse my square quite extensively!
  • But CSS is not fooled by that, not at all. It has its own powers to punch through that mist.
  • And… It's even better when they decide to actually use and combine their powers.
  • What if our single Rect were wearing a mask of itself?
  • Ladies and Gentlemen, here's our hero.
  • At that point, we can go crazy and turn our square into whatever we want!
  • Like… flowers for example!
  • Or… Mmh… A teapot!
  • Because why not?
  • Well, at that point we are venturing a bright world of awesomeness and…
  • Let me tell you one thing.
  • What story would it be without a good villain?
  • I mean… Yeah! That one.
  • It doesn't really like SVG let's face it.
  • It really wants CSS to get stuck with HTML, you know.
  • So it sends us one of its minions.
  • A nasty bug! Yeah!
  • Oh, it looks ugly but let me show you the true face of evil!
  • So… Oh! By the way. Hi Rect! There it is!
  • Okay, cool, that not the problem.
  • The problem is in here. Let me zoom in a bit so you'll see what we are talking about.
  • Here's my Rect! Okay great. Bunch of stuff, all of this working perfectly fine.
  • No, no, no, no… Here's the line. Look at this!
  • It looks so nice, so gentle, so innocent… Ah!
  • Don't be fooled! This not just lies about transitions.
  • No, no, no, no… It completely wiped out the rendering of all my use elements.
  • Dismissed plain and simple… in a blink of a transition
  • Ah, that bug!
  • That bug my friends, it really broke my heart.
  • And… I have to tell you something.
  • What story would it be without… a good cliffhanger!
  • Will the bug be fixed?
  • Will the friendship between CSS and SVG be torn apart?
  • Will my heart be healed?
  • I don't know!
  • I know one thing!
  • It's that you can stand up and you can use CSS with SVG to make awesomeness rise again.
  • And you will be the messenger to tell the world that CSS and SVG will remain forever best friends!
  • Thank you very much.