{"id":366,"date":"2007-04-25T12:59:35","date_gmt":"2007-04-25T18:59:35","guid":{"rendered":"http:\/\/blog.codedread.com\/archives\/2007\/04\/25\/inline-vs-referenced-svg\/"},"modified":"2007-04-25T12:59:35","modified_gmt":"2007-04-25T18:59:35","slug":"inline-vs-referenced-svg","status":"publish","type":"post","link":"https:\/\/www.codedread.com\/blog\/archives\/2007\/04\/25\/inline-vs-referenced-svg\/","title":{"rendered":"Inline vs. Referenced SVG"},"content":{"rendered":"

I've admired Sam Ruby's<\/a> desire to use inline SVG<\/a> for his blog - I think his clip art adds visual appeal to his site. I wish I had Sam's artistic sensibilities\/patience (or that slipping into a scotch-induced trance<\/a> would help). But artistic ability aside, I have been struggling with inline SVG as a concept since then. I thought I'd outline the advantages and disadvantages to inline SVG as I see them.<\/p>\n

Advantages for Inline SVG<\/h3>\n
    \n
  1. other web authors can copy your SVG code and paste into their web pages without having to save off a separate SVG file and deploy it on their server<\/li>\n
  2. web authors cannot hot-link<\/a> to your SVG images<\/li>\n
  3. reduces number of document fetches the browser has to make with the web server for that page (but see Disadvantages #1 and #2 below)<\/li>\n
  4. simplified DOM access if you're into scripting<\/li>\n<\/ol>\n

    Disadvantages for Inline SVG<\/h3>\n
      \n
    1. Your web pages are larger in total size<\/li>\n
    2. SVG images cannot be cached by the browser<\/li>\n
    3. Browser plugins cannot handle inline SVG (prevents some viewers from seeing it)<\/li>\n
    4. Only officially supported in XHTML, which IE does not support<\/li>\n
    5. No fallback mechanism available for inline images<\/li>\n<\/ol>\n

      Based on Sam's recent discussions in the HTML WG, I'm guessing Sam values Advantage #1 above others.<\/p>\n

      Of course it's going to depend on what you're trying to do. For clip art like Sam's site, it's not necessary that every reader see the images or that fallback content is required - so there's a political message there (start using a cool web browser like Firefox<\/a> or Opera<\/a> instead of that clunky blue 'E'). On the other hand, every time Sam writes an entry dealing with WHATWG, he has to go to one of his previous WHATWG entries, search through the source, copy & paste the SVG code - it just seems like an inconvenience for him when a HTML:object to some usefully named file would do the same thing and produce a smaller page.<\/p>\n

      By the way, I recently noticed that Sam came up with a funny image for Java<\/a> (note there are two hyperlinks in that image). The strange part is that he made it a separate 2k file but then also embedded the whole file inline.<\/p>\n

      <\/object><\/div>\n","protected":false},"excerpt":{"rendered":"

      I’ve admired Sam Ruby’s desire to use inline SVG for his blog – I think his clip art adds visual appeal to his site. I wish I had Sam’s artistic sensibilities\/patience (or that slipping into a scotch-induced trance would help). But artistic ability aside, I have been struggling with inline SVG as a concept since […]<\/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":[],"class_list":["post-366","post","type-post","status-publish","format-standard","hentry","category-software","category-svg","category-technology","category-web"],"_links":{"self":[{"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/posts\/366","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=366"}],"version-history":[{"count":0,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/posts\/366\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/media?parent=366"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/categories?post=366"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/tags?post=366"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}