I’m loving SVG

One of the great things about HTML5 is that there is a proposal in the W3C  to allow HTML5 and XHTML to include SVG inline in the documents. But what’s especially great is that if you’re using a modern browser (IE 9+, Firefox, Safari, Chrome, or Opera) you can embed SVG graphics in your HTML5 documents quickly and painlessly.

I am loving SVG because I don’t have to learn anything new. I can simply create vector graphics in Adobe Illustrator and then embed the SVG code into my HTML like I would any other image or embedded element. I don’t even have to use any special tags to call it out, I just paste everything from the starting <svg> tag to the closing </svg> tag.

Here’s an example. Note, I have added a <switch> tag to call a fallback image if your browser doesn’t support inline SVG. This might result in you seeing the image twice, but I hope not. 🙂 If, when you right-click on this graph, you see a PNG image, then you’re seeing the fallback image.

[iframe_loader src=”https://html5in24hours.capstone.kyrnin.com/examples/inline-svg.html” height=”310″]

If you look at the HTML for that image, you’ll see a lot of <g> and <path fill="#FED7B8" d="M149.878,150.489l52.584,112.768c-62.28,29.041-136.311,2.097-165.353-60.184 c-14.521-31.14-15.905-62.854-4.154-95.141L149.878,150.489z"/> and other stuff that might look like gobbledygook, but it’s all SVG, and I didn’t have to come up with any of it. My program, Illustrator, did all the heavy lifting.

The ability to add smooth, crisp vector images to my HTML pages is a huge benefit to using HTML5. I hope that we see more of this type of graphics in the future.

HTML5 last call now has a date

According to IT Pro, the W3C has set a deadline of May 24, 2011 for the last issues to be delivered about the HTML5 specification.

This is exciting news for the standard, as it means that browser makers will start building to it in earnest, web designers can be more confident that the sites they build won’t need hacks, and HTML5 will grow in popularity and importance.