{"id":433,"date":"2008-02-27T09:51:41","date_gmt":"2008-02-27T15:51:41","guid":{"rendered":"http:\/\/blog.codedread.com\/archives\/2008\/02\/27\/inline-vs-referenced-svg-best-of-both-worlds\/"},"modified":"2008-02-27T09:51:41","modified_gmt":"2008-02-27T15:51:41","slug":"inline-vs-referenced-svg-best-of-both-worlds","status":"publish","type":"post","link":"https:\/\/www.codedread.com\/blog\/archives\/2008\/02\/27\/inline-vs-referenced-svg-best-of-both-worlds\/","title":{"rendered":"Inline vs. Referenced SVG: Best of Both Worlds?"},"content":{"rendered":"<p><object type=\"image\/svg+xml\" width=\"100\" height=\"100\" align=\"right\" hspace=\"10\" data=\"http:\/\/codedread.com\/clipart\/svg.svgz\"><span\/><\/object><a href=\"http:\/\/intertwingly.net\/\">Sam<\/a> had a <a href=\"http:\/\/my.opera.com\/MacDev_ed\/blog\/collection-of-news#comment4772069\">good thought<\/a> over at <a href=\"http:\/\/my.opera.com\/MacDev_ed\/blog\/\">Erik's blog<\/a>.  <a href=\"http:\/\/blog.codedread.com\/archives\/2007\/04\/25\/inline-vs-referenced-svg\/\">In the past<\/a>, I've mostly been on the side of referenced <a href=\"http:\/\/www.w3.org\/Graphics\/SVG\/\" title=\"Scalable Vector Graphics\">SVG<\/a> for clip art - but he raises a good point.  <!--more--><\/p>\n<p>I've just started to use clip art on my blog.  I use it for a variety of reasons:  To add some colour\/interest, to quickly give an indication of the topic, to provide a link to a page related to the topic.  I plan to reuse the clipart over-and-over again.  In my opinion, the best way to do this is by using the &#60;object&#62; tag that references a compressed SVG file.  This means the SVG content is as small as it can possibly be.  It allows the browser to cache the file.  If I want to update the image with a link, then I only have to update it in one place and all my entries get the updates.  It also gives me a mechanism to provide fallback content for browsers that don't support SVG content (like Internet Explorer).  Note that at the moment, I do not do provide fallback content because I can't be bothered to rasterize the SVGs for just one browser - but I could do this if I wanted to.<\/p>\n<p>You may argue that the gzip-compressed SVG is less accessible, but I also provide the de-compressed version in the same location (just remove the 'z' from the file extension).  I also have a growing list of my clip art <a href=\"http:\/\/codedread.com\/clipart\/\">here<\/a>.<\/p>\n<p><object type=\"image\/svg+xml\" width=\"100\" height=\"100\" align=\"right\" hspace=\"10\" data=\"http:\/\/codedread.com\/clipart\/feed.svgz\"><span\/><\/object>However, Sam has brought up <a href=\"http:\/\/www.intertwingly.net\/blog\/2007\/04\/26\/Inline-vs-Referenced-SVG\">in the past<\/a> that allowing &#60;object&#62;s into syndicated feed formats like Atom is less secure than inline SVG itself.  The other arguments in favor of inline SVG are:  the image and article text are self-contained, the source can be more easily viewed, and you can't <a href=\"http:\/\/en.wikipedia.org\/wiki\/Inline_linking\">hot-link<\/a> to the SVG image.<\/p>\n<p>His suggestion to Erik was to provide referenced SVG &#60;object&#62;s in the browser, but when producing feeds to take the SVG and put it inline with the XHTML content.  This is a great idea.  Since my feed-producing code is now within my WordPress theme (thanks to a tip from <a href=\"http:\/\/realtech.burningbird.net\/\">Shelley<\/a>), I might try to do this...<\/p>\n<p>P.S.  Something that just occurred to me:  Wouldn't it also be possible for Sam to do this object->inline conversion on the planet side?  Requiring everyone producing feeds to do this seems like more work than to do it in one central location.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Sam had a good thought over at Erik&#8217;s blog. In the past, I&#8217;ve mostly been on the side of referenced SVG for clip art &#8211; but he raises a good point.<\/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,30],"tags":[58,198],"class_list":["post-433","post","type-post","status-publish","format-standard","hentry","category-software","category-svg","category-technology","category-web","category-xml","tag-atom","tag-svg"],"_links":{"self":[{"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/posts\/433","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=433"}],"version-history":[{"count":0,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/posts\/433\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/media?parent=433"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/categories?post=433"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/tags?post=433"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}