Permalink
Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
193 lines (98 sloc) 9.74 KB
<!doctype html>
<!--[if lt IE 9]> <html class="no-js oldie" lang="en"> <![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>The Final Coming of SVG | Divya Manian</title>
<meta name="author" content="Divya Manian">
<meta name="description" content="I started drafting this post about a month ago, giddy with the news about Microsoft joining SVG Working Group and all the possibilities SVG portended &hellip;">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="canonical" href="http://nimbupani.github.com/the-final-coming-of-svg.html">
<link href="/stylesheets/screen.css" rel="stylesheet">
<link href="http://feeds.feedburner.com/nimbupani" rel="alternate" title="Subscribe" type="application/atom+xml">
<link href="http://feeds.feedburner.com/nimbu" rel="alternate" title="Subscribe to Web Development updates" type="application/atom+xml">
</head>
<body >
<div class="container">
<div class="content">
<header role="banner"> <h1><a href="/">Divya Manian</a></h1>
<h2><a class="twitter" href="https://twitter.com/divya">twitter</a> <a class="rss" href="http://feeds.feedburner.com/nimbupani">RSS Feed</a> <a class="youtube" href="http://youtube.com/nimbupani">Youtube Channel</a> <a class="github" href="https://github.com/nimbupani">Github</a></h2>
</header>
<nav class="sitenav"><a href="/">Home</a>
<a href="/archives">Archives</a>
<a href="/about.html">About</a>
</nav>
<article>
<nav class="article">
<a class="previous" href="/what-web-designers-need-to-know-about-epub.html" title="What Web Designers need to know about EPUB ">❬</a>
<a class="next" href="/mortality-of-morality.html" title="Mortality of Morality">❭</a>
</nav>
<header>
<time datetime="2010-02-11T00:00:00-08:00" pubdate><span class='month'>Feb</span> <span class='day'>11</span> <span class='year'>2010</span></time>
<h1 class="entry-title"><a href="/the-final-coming-of-svg.html">The Final Coming of SVG</a></h1>
</header>
<div class="entry-content"><p>I started drafting this post about a month ago, giddy with the news about Microsoft joining <a href="http://blogs.msdn.com/ie/archive/2010/01/05/microsoft-joins-w3c-svg-working-group.aspx">SVG Working Group</a> and all the possibilities SVG portended. So, I started dreaming of creating a demo of how SVG could be used by web developers now, as background images with fall-back support, webfonts, and what not. Why, you ask? Think about all these that you can do with SVG using CSS:</p>
<ul>
<li>Simple background images that are several times smaller than PNG/GIF formats.</li>
<li>Scalable background images that can be reused on elements with different widths and heights.</li>
<li>SVG background images can share same stylesheet as the webpages which means you do not have to open Photoshop every time you need to change the colors of background images.</li>
<li>Use the same SVG file <a href="http://nimbupani.com/about-fonts-in-svg.html">as a font</a> and an image.</li>
</ul>
<p></p>
<p>Alas, it was not to be! The story of SVG is like the story of the boy who cried Wolf. Every 2 years there is a riot about SVG&#8217;s coming dominance, nothing happens, and everybody goes away disappointed. So, when SVG truly becomes a standard supported by most browsers, nobody gives a damn.</p>
<p>At the risk of sounding like that boy, my opinion is SVG dominance is closer to reality than ever before. SVG support for most modern browsers has improved (<a href="http://www.opera.com/docs/specs/presto23/svg/attributes/">Opera</a>, <a href="https://developer.mozilla.org/en/SVG_in_Firefox">Firefox</a>, <a href="http://webkit.org/projects/svg/status.xml">Webkit</a>). <a href="http://hsivonen.iki.fi/test-html5-parsing/">HTML specification has been updated to allow in-line SVG</a> too! Hell, there are even <a href="http://paulirish.com/work/gordon/demos/">Flash runtimes written with JavaScript and SVG</a> that can run Flash animations on browsers that do not support Flash (I am looking at you, iPhone Safari).</p>
<p>David Storey has <a href="http://people.opera.com/dstorey/user-interfacesvgcss.html">a nifty example of a HTML5 UI that uses SVG files as background images</a>. Browsers do not consistently support using SVG files as background images. Safari does not render the file if the SVG does not have absolute width and height specified (not so for Chrome). Firefox does not render SVG background images at all. Here is <a href="http://nimbu.in/demo/svg/">a demo of using an SVG file as background or border image</a>.</p>
<p>You have much better luck with <a href="http://www.alistapart.com/articles/using-svg-for-flexible-scalable-and-fun-backgrounds-part-ii">SVG images rendered via the object element</a>, most browsers support SVG as an image format, and for IEs you could use <a href="http://code.google.com/p/svgweb/">SVGWeb</a> to replace them with a flash file. In SVG-friendly browsers, you can also use this <a href="http://plugins.jquery.com/project/svg ">jQuery plugin to manipulate SVG files</a>.</p>
<p></p>
<p>So, all this means good times are ahead for SVG. <a href="http://lists.w3.org/Archives/Public/www-svg/2010Jan/0108.html">Microsoft even seems to be asking relevant questions</a> about implementing SVG, which only supports the assertion that IE9 will be the first Internet Explorer to support SVG.</p>
<p>If you are interesting in learning SVG, the <a href="http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html">W3C SVG Primer</a> is best place to start. You can also create simple shapes in Illustrator or Inkscape and save them as SVG, but they are more likely to be tag-soups, so be sure to clean them with <a href="http://www.planetsvg.com/tools/scour/scra.py/form">Scour</a>.</p>
</div>
<footer>
<p class="meta">This post was posted by
<a href="/about.html">Divya Manian</a>
on
<time datetime="2010-02-11T00:00:00-08:00" pubdate><span class='month'>Feb</span> <span class='day'>11</span> <span class='year'>2010</span></time> in
<span class="categories">
<a class='category' href='/categories/web-development/'>Web Development</a>
</span>
. If you would like to update this post, <a href="https://github.com/nimbupani/nimbupani.github.com/blob/source/source/_posts/2010-02-11-the-final-coming-of-svg.md">please send a pull request</a>.
</p>
</footer>
</article>
<section>
<h1>Comments</h1>
<div id="disqus_thread" aria-live="polite"><noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
</div>
</section>
</div>
</div>
<aside id="articles">
<p><img class="avatar" src="/assets/divya.png" height=50> <a href="http://twitter.com/divya">Divya Manian</a> is a Web Developer in Seattle. <a href="/about.html">More about me ❭</a></p>
<h2>Posts on Web Development</h2>
<ul><li><a href="/html5please.html">html5please</a></li><li><a href="/mustache.html">mustache, hogan, handlebars</a></li><li><a href="/redesign-notes.html">Redesign Notes</a></li><li><a href="/summary-of-various-exciting-css-drafts-and-proposals.html">Summary of various exciting CSS drafts and proposals</a></li><li><a href="/this-revolution-needs-new-revolutionaries.html">This revolution needs new revolutionaries</a></li><li><a href="/some-css-transition-hacks.html">Some CSS Transition hacks</a></li><li><a href="/safe-css-defaults.html">Safe CSS Defaults</a></li><li><a href="/unplugged-2011.html">Unplugged 2011</a></li><li><a href="/bokeh-with-css3-gradients.html">Bokeh with CSS3 Gradients</a></li><li><a href="/making-pure-css3-demos-better.html">Making "Pure CSS3" demos better</a></li><li><a href="/web-opener-at-opera.html">Web Opener at Opera</a></li><li><a href="/current-color-in-css.html">Current Color in CSS</a></li><li><a href="/css-vocabulary.html">CSS Vocabulary</a></li><li><a href="/active-web-development.html">Active Web Development</a></li><li><a href="/sexy-css3-buttons.html">Sexy CSS3 Buttons</a></li><li><a href="/accessible-css-barcharts.html">Accessible CSS Barcharts</a></li><li><a href="/svg-is-coming.html">SVG is coming!</a></li><li><a href="/wee-marquee.html">Wee! Marquee</a></li><li><a href="/vignettes-with-css3-box-shadows.html">Vignettes with CSS3 Box Shadows</a></li><li><a href="/drop-shadows-with-css3.html">Drop Shadows with CSS3</a></li><li><a class="btn" href="/categories/web-development/">More</a></li></ul>
</aside>
<footer role="contentinfo"><p>
Copy to your heart’s content 2012 - Divya Manian -
<span class="credit">Powered by <a href="http://octopress.org">Octopress</a></span>
</p>
</footer>
<script type="text/javascript">
var disqus_shortname = 'nimbublog';
var disqus_developer = 1;
var disqus_url = 'http://nimbupani.com/the-final-coming-of-svg.html';
var disqus_identifier = 'http://nimbupani.com/the-final-coming-of-svg.html';
(function () {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
}());
</script>
<script src="/javascripts/octopress.js"></script>
<script>
var _gaq=[['_setAccount','UA-97188-1'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
</body>
</html>