This document provides a timeline summary of SVG (Scalable Vector Graphics) from its inception in 1998 to the present. It notes the 6 competing vector graphic proposals in 1998 that led the W3C to start work on SVG. Key events include SVG 1.0 being released in 2001, adoption by major browsers in the late 2000s/early 2010s, and growing browser support reaching over 96% by 2016. The document presents SVG as a mature technology that is "ready for prime time" for creating crisp graphics for modern high-resolution displays across all browsers.
5. W3C starts to work on SVG. 1998
SVG =
XML + DOM +
CSS + Animations (SMIL) +
Filters + Text + XLinks +
Transforms + SVG Fonts + etc
“… it was easier to say yes than no”
—Jon Ferraiolo
19. SVG community
@sarah_edo @anatudor@AmeliasBrain @rachelnabors@SaraSoueidan
Sharing best practices and code
@chriscoyier
"If you don't know SVG you can't call yourself
a Web Developer.
Call yourself a Web Enthusiast” — Dmitry
@DmitryBaranovsk
20. W3C SVG Working Group
@svgeesus @shepazu@erikdahlstromTavmjong Bah @dirkschulze
Pushing forward SVG
Thanks for
the timeline, Doug!
SVG is simple. It’s just tags and attributes. Very similar to HTML.
It’s human readable text… and at the same time.. it’s a graphic.
CLICK
It’s exactly this double personality that makes SVG special.
This talk will be about the origins of SVG. There is a nice story to tell here.
W3C said.. let’s make a standard on vector graphics. Send me your proposals!
And it had 6 competing proposals on the table
W3C just needed to pick one. Really,… just choose one.
Exactly. Why to choose one when you can write a new one from scratch? SVG was born,
CLICK
taking the best parts from each one … specially inspired on VML from Microsoft.
SVG specification it’s big. Really. It’s huge, it’s bigger than HTML specification. It has SO ma-ny fea-tu-res
For example, Transforms: when you are using cool new CSS3 rotations today… think that this feature was inspired by SVG, and they had it for more than 15 years already.
Why SVG is so big? Companies involved were pressuring to include features in SVG.. and it was easier to say yes that no. I think we all have been there
SVG 1 was released in 2001
In that moment, let’s say that SVG got a bit frozen because in all this time, SVG hasn’t changed that much.
The main supporter of SVG in the time, was Adobe. They made a plugin to view SVGs that worked in all browsers. That plugin was the first implementation of SVG. It was the prove that SVG works!
In that time, SVG future looked really promising
But… One big set back, for SVG was that Flash, it got popular and Adobe bought Macromedia
Sadly Adobe turned their back on SVG. They stopped support for their SVG Viewer plugin
SVG popularity went down. Let’s call it the SVG dark age. Why?
Let’s remember for a second, Internet Explorer had 90% of browser market during those years.
It didn’t matter that Firefox, Opera or Safari started already to implement some parts of SVG… because at the end of the day… Internet Explorer was the king, and they had their own vector graphics language, VML
2008. HTML 5 was born. SVG tag is introduced, so now we can inline svg inside of an HTML document
Microsoft finally leaves their VML language behind.. and offers at least basic SVG support in Internet Explorer 9.
Now, all browsers have at least some SVG basic support. Things are starting to change…
Apple has made a big impact on SVG return, indirectly by:
• Blocking Flash on iPhone
• Releasing High density screens
Apple set the trend for the rest of companies. Flash started to die in that moment.
In this new situation, Web developers need something to show crisp sharp graphics in smartphones.
What technology do we have to achieve this?
CLICK
It’s SVG Time
SVG support is excellent today.
So, my message today is:
My message today is: Use SVG, understand SVG. SVG has been waiting for this moment for 15 years!
15 years in the web, it feels like a century I know..
but don’t worry SVG 2 is coming soon
Some parts, like Transforms, are developed as separate CSS modules, so it can be applied to both HTML and SVG
In the meanwhile, to know best practices, and how to use SVG, you can learn from a small group of SVG experts