I'm loving SVG

Tue, 03 Jul 2012 19:48:31 +0000

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://www.html5in24hours.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.

Comments:

Beth - Jul 4, 2012

Love getting your helpful hints.

Stan - Jul 0, 2012

Just starting to learn into this Canvas/HTML5 & need more patience for better understanding. Sounds very positive & looks good! Thanks for this kick-start help. God bless! Stan from Windhoek

Bob - Sep 2, 2012

Stan, Canvas/HTML5 and SVG are different. Canvas is a raster image while SVG is a scalable image.

HTML5 last call now has a date

Tue, 19 Apr 2011 16:29:57 +0000

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.

W3C on HTML5 in 24 Hours

I'm loving SVG

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.

Comments:

HTML5 last call now has a date