{"id":945,"date":"2010-09-21T17:02:10","date_gmt":"2010-09-21T17:02:10","guid":{"rendered":"http:\/\/www.codedread.com\/blog\/?p=945"},"modified":"2010-09-21T17:05:01","modified_gmt":"2010-09-21T17:05:01","slug":"start-chopping-off-heads","status":"publish","type":"post","link":"https:\/\/www.codedread.com\/blog\/archives\/2010\/09\/21\/start-chopping-off-heads\/","title":{"rendered":"Start Chopping Off Heads"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" width=\"100\" height=\"100\" style=\"float:right\" src=\"http:\/\/codedread.com\/clipart\/hydra.svgz\" alt=\"I want to believe. SVG as an image format.\"><\/img>Because my kids are now old enough to grok some complex games, I've introduced them to the <a href=\"http:\/\/en.wikipedia.org\/wiki\/Magic:_the_gathering\">Magic: The Gathering<\/a> card game.  They love it.  I love it.  To continue the fun, we went to a local comic book store and bought a couple booster packs, which apparently are still being sold throughout the world.  One of my kids got a <a href=\"http:\/\/www.amazon.com\/Protean-Hydra-Magic-Mythic-Gathering\/dp\/B002TJX23W\">Protean Hydra<\/a>.  Sweet!  The <a href=\"http:\/\/en.wikipedia.org\/wiki\/Lernaean_Hydra\">Hydra<\/a> is a mythical beast with nine heads, and every time you chop off a head, two more grow back.<\/p>\n<p>The web is like that.  And we're not <a href=\"http:\/\/hsivonen.iki.fi\/spacer\/\">chopping off heads<\/a> fast enough. <!--more--><\/p>\n<p>Now that Internet Explorer has come out of its corner swinging with SVG support, I figured it's time to make sure we can actually deploy web pages with SVG content in them.  Did you know that there are at least <em>thirteen<\/em> ways to deploy SVG on the web?<\/p>\n<ul>\n<li>inline in <a href=\"http:\/\/dev.w3.org\/html5\/spec\/the-map-element.html#svg-0\">HTML5<\/a> as <em>not-XML<\/em> (or !XML as I like to call it)<\/li>\n<li>inline in XHTML (1.1 or 5) as XML<\/li>\n<li>via the <a href=\"http:\/\/dev.w3.org\/html5\/spec\/embedded-content-1.html#the-img-element\">HTML:img<\/a> element<\/li>\n<li>via the <a href=\"http:\/\/dev.w3.org\/html5\/spec\/the-iframe-element.html#the-object-element\">HTML:object<\/a> element<\/li>\n<li>via the <a href=\"http:\/\/dev.w3.org\/html5\/spec\/the-iframe-element.html#the-embed-element\">HTML:embed<\/a> element<\/li>\n<li>via the <a href=\"http:\/\/dev.w3.org\/html5\/spec\/the-iframe-element.html#the-iframe-element\">HTML:iframe element<\/a><\/li>\n<li>via the <a href=\"http:\/\/www.w3.org\/TR\/2010\/WD-SVG11-20100622\/struct.html#ImageElement\">SVG:image<\/a> element<\/li>\n<li>via the <a href=\"http:\/\/www.w3.org\/TR\/2010\/WD-SVG11-20100622\/extend.html#ForeignObjectElement\">SVG:foreignObject<\/a> element<\/li>\n<li>as a fragment via the <a href=\"http:\/\/www.w3.org\/TR\/2010\/WD-SVG11-20100622\/struct.html#UseElement\">SVG:use<\/a> element<\/li>\n<li>via the <a href=\"http:\/\/www.w3.org\/TR\/CSS2\/colors.html#propdef-background-image\">background-image<\/a> CSS property<\/li>\n<li>via the <a href=\"http:\/\/www.w3.org\/TR\/CSS2\/generate.html#propdef-list-style-image\">list-image<\/a> CSS property<\/li>\n<li>via the <a href=\"http:\/\/www.w3.org\/TR\/2002\/WD-css3-border-20021107\/#the-border-image-uri\">border-image<\/a> CSS property<\/li>\n<li>directly linking and then browsing to a SVG file<\/li>\n<\/ul>\n<p>Does anyone know why the &#60;embed&#62; element was not deprecated in HTML5?  Was it the realities of the IE deployment difficulties around the &#60;object&#62; tag?  It sounds like IE9 will help to fix that so maybe &#60;embed&#62; can eventually be deprecated in HTML6 five years from now?<\/p>\n<p>What's worse is that the properties on the embedding context and the SVG elements affect how the SVG is rendered.  The width\/height properties on &#60;object&#62;\/&#60;embed&#62;\/&#60;iframe&#62; tags.  The width\/height\/<a href=\"http:\/\/www.w3.org\/TR\/2010\/WD-SVG11-20100622\/coords.html#ViewBoxAttribute\">viewBox<\/a> properties on the &#60;svg&#62; element.  The <a href=\"http:\/\/www.w3.org\/TR\/2010\/WD-SVG11-20100622\/coords.html#PreserveAspectRatioAttribute\">preserveAspectRatio attribute<\/a> on the &#60;svg&#62; element.<\/p>\n<p>The width attribute on a &#60;svg&#62; element can be specified in units of em, ex, px, in, cm, mm, pt, pc or it can be unitless or it can be a percentage.  Of course the height attribute can be specified in different units.<\/p>\n<p>The embedding context also determines whether scripts are run within the SVG document. Hint: Should not be run in image contexts.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"100\" height=\"100\" style=\"float:right\" src=\"http:\/\/codedread.com\/clipart\/caution.svgz\" alt=\"I want to believe. SVG as an image format.\"><\/img>But it gets worse.  Let's just look at one case: embedding an SVG document in a web page via the &#60;object&#62; tag:<\/p>\n<p><code>&#60;object type='image\/svg+xml' data='...'&#62;&#60;\/object&#62;<\/code><\/p>\n<p>For the data attribute you can specify a local file, a http\/https URL or a data URI.  The browser can treat each of these cases differently.<\/p>\n<p>The file served to the browser can have a MIME type of image\/svg+xml or text\/xml or application\/xml.  Browsers might do something different in these cases (though they shouldn't).<\/p>\n<p>If the width\/height on the &#60;object&#62; tag are specified, they should override the &#60;svg&#62; width\/height if the &#60;svg&#62; width\/height are in absolute (not relative\/percentage) units.  The coordinate system of the SVG should map to the viewBox attribute unless the viewBox attribute is not specified, in which case it should be inferred.  Got all that?<\/p>\n<p>If width\/height on &#60;object&#62; are not specified, and width\/height of the SVG are specified in absolute terms, then the size of the &#60;object&#62; frame should change to match the size of the SVG.<\/p>\n<p>If width\/height on &#60;object& are not specified on a Tuesday of a leap year, and the SVG document has an odd-number of bytes in it and includes the string 'rick' or 'roll' anywhere in it, then the browser should play a video instead.<\/p>\n<p>I'm not making this up, it's <a href=\"http:\/\/goo.gl\/Bxjk\">right here<\/a> in the spec.<\/p>\n<p>Actually the difficulty of this case is that there are so many dimensions and that it's spread across multiple specs: HTML, CSS, SVG.  I think WICD\/CDF was supposed to address some (all?) of these cases, but ... are those specs actually valid?  And by that I mean, are browser vendors paying attention to them?  As Dolores O'Riordan might say: Does anyone care?<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"100\" height=\"150\" style=\"float:right\" src=\"http:\/\/codedread.com\/clipart\/iphone.svgz\" alt=\"I want to believe. SVG as an image format.\"><\/img>There's something to be said for the simplicity of the iPhone's \"one\" button.  Android's addition of the \"Back\" button is a perfect example of how a system can be incrementally improved.<\/p>\n<p>Anyway, I've started to look at just three dimensions of this n-dimensional problem:  the HTML embedding context, width\/height and viewBox.  I wrote a <a href=\"http:\/\/codedread.com\/browser-tests\/svg-image\/html.html\">test case<\/a> showing the 16 possible combinations.  I was not really shocked that between all the four major browser engines, only one case displayed consistently across all latest builds: as an &#60;img&#62; with width\/height specified on both &#60;img&#62; and &#60;svg&#62;.<\/p>\n<p>I'm really tired of reading specs (I'm sure this will pass), so in absence of a <a href=\"http:\/\/lists.w3.org\/Archives\/Public\/www-svg\/2010Sep\/0081.html\">reference rendering<\/a> of this page, we'll just need to do what we always do: Make it look the same across all browsers.  Now that we have IE9, it can act as a tie-breaker between renderings that could be argued one way or the other \ud83d\ude42<\/p>\n<p>Hopefully I'll be able to talk more about these 16 cases in the future.  Now you know where to come if you're having trouble sleeping.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Because my kids are now old enough to grok some complex games, I&#8217;ve introduced them to the Magic: The Gathering card game. They love it. I love it. To continue the fun, we went to a local comic book store and bought a couple booster packs, which apparently are still being sold throughout the world. [&#8230;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[25,46,11,28],"tags":[99,198,154],"class_list":["post-945","post","type-post","status-publish","format-standard","hentry","category-software","category-svg","category-technology","category-web","tag-html5","tag-svg","tag-w3c"],"_links":{"self":[{"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/posts\/945","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/comments?post=945"}],"version-history":[{"count":13,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/posts\/945\/revisions"}],"predecessor-version":[{"id":958,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/posts\/945\/revisions\/958"}],"wp:attachment":[{"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/media?parent=945"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/categories?post=945"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/tags?post=945"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}