SVG & CSS

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.