/
svg-is-coming.html
181 lines (99 loc) · 9.45 KB
/
svg-is-coming.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
<!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>SVG is coming! | Divya Manian</title>
<meta name="author" content="Divya Manian">
<meta name="description" content="I am an SVG fanatic, in fact I was using SVG for implementing my final year project (which was to create a GPS system on a linux mobile device) in …">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="canonical" href="http://nimbupani.github.com/svg-is-coming.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="/wee-marquee.html" title="Wee! Marquee">❬</a>
<a class="next" href="/serious-play-in-music.html" title="Serious Play in Music">❭</a>
</nav>
<header>
<time datetime="2010-07-16T00:00:00+05:30" pubdate><span class='month'>Jul</span> <span class='day'>16</span> <span class='year'>2010</span></time>
<h1 class="entry-title"><a href="/svg-is-coming.html">SVG is coming!</a></h1>
</header>
<div class="entry-content"><p>I am an SVG fanatic, in fact I was using SVG for implementing my final year project (which was to create a GPS system on a linux mobile device) in 2000. So yes, I am partial to SVG and cannot <a href="http://nimbupani.com/search/node/svg">stop writing about it</a>.</p>
<p>I have long bemoaned the persistent <a href="http://nimbupani.com/the-final-coming-of-svg.html">lack of love for SVG from browser vendors</a> but these developments indicate that is no longer the case: </p>
<ol>
<li><p>HTML spec allows inline SVG in your HTML document (and not just XHTML document). This means <a href="http://dev.w3.org/html5/html4-differences/#mathml-svg">you can use an SVG element inline an HTML document</a> (without using any ugly object tags). You can already test it on the <a href="http://nightly.mozilla.org/">nightly builds of Firefox</a></p></li>
<li><p>Apple’s retina display brought back attention to this <a href="http://webkit.org/blog/55/high-dpi-web-sites/">old post on how to develop websites for higher DPI</a> – which basically advocates SVG (<a href="http://paulirish.com">Paul Irish</a> also tells me <a href="http://code.google.com/p/android/issues/detail?id=1376">a future release of Android will support SVG</a>). </p></li>
<li><p>@media queries are extensively supported in several browsers. Andreas Bovens of Opera has a great technique to <a href="http://my.opera.com/ODIN/blog/2009/10/12/how-media-queries-allow-you-to-optimize-svg-icons-for-several-sizes">use media queries with SVG</a> which he explains in this video:</p><object width="640" height="385"><param name="movie" value="http://www.youtube.com/v/YAK5el8Uvrg&color1=0xb1b1b1&color2=0xd0d0d0&hl=en_US&feature=player_embedded&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowScriptAccess" value="always"></param><embed src="http://www.youtube.com/v/YAK5el8Uvrg&color1=0xb1b1b1&color2=0xd0d0d0&hl=en_US&feature=player_embedded&fs=1"; type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="640" height="385"></embed></object>
<p>You can control the styles of the SVG file that referred to by an image element, based on the width specified on the image element (see demos of <a href="http://people.opera.com/andreasb/demos/demos_svgopen2009/circles.html">colored circles</a>, <a href="http://people.opera.com/andreasb/demos/demos_svgopen2009/svgscalelogo.html">scaling SVG logos</a>, and <a href="http://people.opera.com/andreasb/demos/demos_svgopen2009/svgscalegold.html">altering SVG charts</a>. </p>
<p><em>Update:</em> <a href="http://schepers.cc/">Shepazu</a> has rightly stated CSS Media Queries work on Firefox, Webkit and Opera, not just Opera (for some reason the colored circles demo only seems to show in Opera).</p>
</li>
<li><p><a href="http://svg-edit.googlecode.com/svn/trunk/editor/svg-editor.html">SVG-Edit</a> is a fantastic open-source online SVG editing platform (it is new and the UI needs some love), especially for tiny icons.
</p></li>
<li>Opera, Webkit browsers recognize SVG images served as <a href="http://dl.dropbox.com/u/952/svgdatauri.html">data-uris for use as background images</a>.
</li>
</ol>
<p></p>
<p>I am glad things are looking up for dear SVG. What was that <a href="http://nimbupani.com/bit-of-svg-and-canvas.html">Canvas thing</a> you were talking about?</p>
</div>
<footer>
<p class="meta">This post was posted by
<a href="/about.html">Divya Manian</a>
on
<time datetime="2010-07-16T00:00:00+05:30" pubdate><span class='month'>Jul</span> <span class='day'>16</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-07-16-svg-is-coming.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="http://a2.twimg.com/profile_images/1696865113/me_normal" height=48> <a href="http://twitter.com/divya">Divya Manian</a> lives in SF. <a href="/about.html">More about me ❭</a></p>
<h2>Posts on Web Development</h2>
<ul><li><a href="/diversity-in-conferences.html">Diversity in Conferences</a></li><li><a href="/using-decimal-percentage-values-in-responsive-design.html">Using decimal percentage values in responsive design</a></li><li><a href="/using-background-clip-for-text-with-css-fallback.html">Using background clip for text with CSS fallback</a></li><li><a href="/markup-free-icon-fonts-with-unicode-range.html">Markup-free icon fonts using unicode-range</a></li><li><a href="/jscamp-css-next.html">JSCamp: CSS Next</a></li><li><a href="/some-updates.html">Some Updates</a></li><li><a href="/css-object-model.html">CSS Object Model</a></li><li><a href="/fake-bolding-of-web-fonts.html">Fake Bolding of Web Fonts</a></li><li><a href="/html5please-api.html">Html5please API</a></li><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 class="btn" href="/categories/web-development/">More</a></li></ul>
</aside>
<footer role="contentinfo"><p>
Copy to your heart’s content 2013 - 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/svg-is-coming.html';
var disqus_identifier = 'http://nimbupani.com/svg-is-coming.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>