{"id":15351,"date":"2012-10-31T21:01:50","date_gmt":"2012-10-31T13:01:50","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=15351"},"modified":"2025-04-24T17:17:57","modified_gmt":"2025-04-24T09:17:57","slug":"scalable-vector-graphic-browsers","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/scalable-vector-graphic-browsers\/","title":{"rendered":"Adding Scalable Vector Graphics (SVG) in Unsupported Browser"},"content":{"rendered":"<p>In an earlier post in <a href=\"https:\/\/www.hongkiat.com\/blog\/tag\/svg\/\">this series<\/a>, we have mentioned a bit about <a href=\"https:\/\/www.hongkiat.com\/blog\/test-svg-format-browser-engines\/\">SVG\u2019s pitfall with old browsers<\/a> and using <a href=\"https:\/\/dmitrybaranovskiy.github.io\/raphael\/\" rel=\"nofollow noopener\" target=\"_blank\">Raphael.js<\/a> to serve the graphic as an alternative solution. In this post we will take a look at this matter further.<\/p>\n<p>The idea is simple, we will still be using <a href=\"https:\/\/www.w3.org\/TR\/SVG\/struct.html\" rel=\"nofollow noopener\" target=\"_blank\">SVG elements<\/a> as the primary way to deliver graphics on our webpage, but at the same time we will also provide a fallback function <strong>so that it can be still rendered in unsupported browsers<\/strong>.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/scalable-vector-graphic\/\" class=\"ref-block__link\" title=\"Read More: A Look into: Scalable Vector Graphics (SVG)\" rel=\"bookmark\"><span class=\"screen-reader-text\">A Look into: Scalable Vector Graphics (SVG)<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/scalable-vector-graphic.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-15254 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/scalable-vector-graphic.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">A Look into: Scalable Vector Graphics (SVG)<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tVector graphics have been widely applied in print media. In a website, we can also add vector graphics...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<p>Sure, there are many paths we can take, but we will only look into to two solutions that I think is a better generic solution. So, let\u2019s see how we can do it.<\/p>\n<h2>Using Object Element<\/h2>\n<p>Apart from putting it directly into an HTML document, there are several ways to embed SVG. For instance, if we store the graphic in <code>.svg<\/code> file, we can use the <code>&lt;object&gt;<\/code> element.<\/p>\n<pre>\n  &lt;object data=\"images\/apple.svg\"&gt;&lt;\/object&gt;\n<\/pre>\n<p>For the demonstration purpose, we have added an Apple logo with SVG to our webpage. However, the unsupported browsers will remain empty. To solve the problem, we can serve a <a href=\"https:\/\/en.wikipedia.org\/wiki\/Bitmap\" rel=\"nofollow noopener\" target=\"_blank\">Bitmap graphic<\/a>, as follows;<\/p>\n<pre>\n  &lt;object data=\"images\/apple.svg\"&gt;\n    &lt;img src=\"images\/apple.png\"\/&gt;\n  &lt;\/object&gt;\n<\/pre>\n<p>This way, supported browsers will still be taking the <code>.svg<\/code>, while <strong>the unsupported browsers will carry the Bitmap graphic<\/strong>. We have added the <strong>\u201cpng\u201d<\/strong> mark below the Apple logo to track which graphic is being delivered.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"svg apple logo\" height=\"280\" src=\"https:\/\/assets.hongkiat.com\/uploads\/scalable-vector-graphic-browsers\/svg-apple-png.jpg\" width=\"500\"><\/figure>\n<p>However, as we have mentioned in the other post, <strong>Bitmap graphics are not as flexible and scalable as SVG<\/strong>. So, let\u2019s take a look at another solution.<\/p>\n<h2>Using Modernizr<\/h2>\n<p>Another method we can use is by using <strong><a href=\"https:\/\/modernizr.com\/\" rel=\"nofollow noopener\" target=\"_blank\">Modernizr<\/a><\/strong>. For those of you who are not familiar with this JavaScript library, don\u2019t worry we will have a dedicated post to cover about it. For now, just keep up with us.<\/p>\n<p>First of all, let\u2019s prepare some required JavaScript libraries, <strong>Modernizr.js and Raphael.js<\/strong>. Then, we also need to convert our <code>.svg<\/code> file into a Raphael-supported format with this tool, <a href=\"https:\/\/readysetraphael.com\/\" rel=\"nofollow noopener\" target=\"_blank\">ReadySetRaphael.js<\/a>, and save the output in a separate <code>.js<\/code> file; let\u2019s name it <code>svg.js<\/code>.<\/p>\n<p>Include the Modernzr.js in the HTML document, like so:<\/p>\n<pre>\n  &lt;script type=\"text\/javascript\" src=\"scripts\/modernizr.js\"&gt;&lt;\/script&gt;\n<\/pre>\n<p>And for the other two files, <code>raphael.js<\/code> and <code>svg.js<\/code>, we will load it conditionally, <strong>only when it is viewed in unsupported browsers<\/strong>.<\/p>\n<p>With Modernizr we can detect the browser capability, in this case we will detect whether the browser is capable of rendering SVG, and if it is not we will serve the script:<\/p>\n<pre>\n    document.write(\n      '&lt;script type=\"text\/javascript\" src=\"scripts\/raphael.js\"&gt;&lt;\\\/script&gt;',\n      '&lt;script type=\"text\/javascript\" src=\"scripts\/svg.js\"&gt;&lt;\\\/script&gt;'\n    );\n  }\n<\/pre>\n<p>Now we only need to add the HTML markups, as follows;<\/p>\n<pre>\n  &lt;svg version=\"1.1\" xmlns=\"https:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"https:\/\/www.w3.org\/1999\/xlink\" x=\"0\" y=\"0\" width=\"500\" height=\"280\" viewBox=\"0 0 500 280\" enable-background=\"new 0 0 500 280\" xml:space=\"preserve\"&gt;\n    &lt;path fill=\"#333333\" d=\"M296.908,120.622c-8.77,6.201-13.158,13.676-13.158,22.41c0,10.458,5.425,18.479,16.262,24.076\nc-2.908,8.435-7.122,15.764-12.65,22.009c-5.516,6.243-10.553,9.368-15.11,9.368c-2.147,0-5.075-0.718-8.794-2.133l-1.782-0.687\nc-3.646-1.416-6.854-2.133-9.656-2.133c-2.641,0-5.535,0.555-8.679,1.665l-2.237,0.807l-2.818,1.154\nc-2.218,0.884-4.468,1.326-6.725,1.326c-5.328,0-11.208-4.387-17.642-13.161c-9.273-12.567-13.905-26.264-13.905-41.085\nc0-10.538,2.886-19.02,8.678-25.46c5.78-6.432,13.446-9.658,22.979-9.658c3.566,0,6.897,0.653,10,1.958l2.129,0.865l2.238,0.92\nc1.992,0.84,3.601,1.264,4.825,1.264c1.569,0,3.316-0.364,5.231-1.094l2.929-1.151l2.19-0.804c3.483-1.262,7.34-1.896,11.555-1.896\nC282.777,109.183,290.814,112.996,296.908,120.622z M273.238,82.575c0.108,1.344,0.167,2.378,0.167,3.102\nc0,6.628-2.412,12.442-7.237,17.443c-4.823,5-10.438,7.494-16.837,7.494c-0.189-1.493-0.29-2.563-0.29-3.212\nc0-5.635,2.239-10.924,6.726-15.864c4.482-4.939,9.671-7.838,15.575-8.678C271.754,82.787,272.395,82.696,273.238,82.575z\"\/&gt;\n  &lt;\/svg&gt;\n\n  &lt;div id=\"applelogo\"&gt;&lt;\/div&gt;\n<\/pre>\n<p>In the code snippet above, we have added the SVG directly into the HTML document and a <code>div<\/code> to accommodate the Raphael code. Once again to be able to notice which graphic is being delivered easily, we have also put some text below the logo inside the SVG element.<\/p>\n<pre>\n  &lt;text x=\"210\" y=\"250\"&gt;This is SVG&lt;\/text&gt;\n<\/pre>\n<p>So, here is what we will get in the browsers.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" alt=\"svg apple\" height=\"280\" src=\"https:\/\/assets.hongkiat.com\/uploads\/scalable-vector-graphic-browsers\/svg-apple-modernizr.jpg\" width=\"500\"><\/figure>\n<p>To see it more clearly, you can view the demo from the links below and make sure you try it in different browsers; we would suggest <strong>IE8\/7<\/strong> and <strong>Google Chrome<\/strong>.<\/p>\n<div class=\"button\">\n    <a href=\"https:\/\/hongkiat.github.io\/scalable-vector-graphic-browsers\/\" rel=\"nofollow noopener\" target=\"_blank\">View Demo<\/a>\n    <a href=\"https:\/\/github.com\/hongkiat\/scalable-vector-graphic-browsers\/\" rel=\"nofollow noopener\" target=\"_blank\">Download Source<\/a>\n<\/div>\n<h2>Final Thought<\/h2>\n<p>Alright, these are just a few examples, in particular cases they might not be that effective. But in general, these should do a favor to solve the problem on serving SVG in unsupported browsers. Lastly, if you have something to add that we\u2019ve missed in this post, feel free to share it in the comment box below.<\/p>\n<p>Thanks for reading this post and we hope you enjoyed it.<\/p>\n<h2>More<\/h2>\n<p>You may also be interesting in the following posts:<\/p>\n<ul>\n<li> <a href=\"https:\/\/www.hongkiat.com\/blog\/tag\/svg\/\">Scalable Vector Graphics \u2013 The Basic<\/a> <\/li>\n<li> <a href=\"https:\/\/www.hongkiat.com\/blog\/scalable-vector-graphic-css-styling\/\">Scalable Vector Graphics \u2013 Styling with CSS<\/a> <\/li>\n<li> <a href=\"https:\/\/www.hongkiat.com\/blog\/scalable-vector-graphics-text\/\">Scalable Vector Graphics \u2013 Working with Text<\/a> <\/li>\n<li> <a href=\"https:\/\/www.hongkiat.com\/blog\/scalable-vector-graphics-animation\/\" rel=\"nofollow\">Scalable Vector Graphics \u2013 Animation<\/a> <\/li>\n<\/ul>","protected":false},"excerpt":{"rendered":"<p>In an earlier post in this series, we have mentioned a bit about SVG\u2019s pitfall with old browsers and using Raphael.js to serve the graphic as an alternative solution. In this post we will take a look at this matter further. The idea is simple, we will still be using SVG elements as the primary&hellip;<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392,352],"tags":[4117,2298,2175],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Adding Scalable Vector Graphics (SVG) in Unsupported Browser - Hongkiat<\/title>\n<meta name=\"description\" content=\"In an earlier post in this series, we have mentioned a bit about SVG&#039;s pitfall with old browsers and using Raphael.js to serve the graphic as an\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/scalable-vector-graphic-browsers\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Adding Scalable Vector Graphics (SVG) in Unsupported Browser\" \/>\n<meta property=\"og:description\" content=\"In an earlier post in this series, we have mentioned a bit about SVG&#039;s pitfall with old browsers and using Raphael.js to serve the graphic as an\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/scalable-vector-graphic-browsers\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2012-10-31T13:01:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-24T09:17:57+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/scalable-vector-graphic-browsers\/svg-apple-png.jpg\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/scalable-vector-graphic-browsers\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/scalable-vector-graphic-browsers\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"Adding Scalable Vector Graphics (SVG) in Unsupported Browser\",\"datePublished\":\"2012-10-31T13:01:50+00:00\",\"dateModified\":\"2025-04-24T09:17:57+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/scalable-vector-graphic-browsers\\\/\"},\"wordCount\":614,\"commentCount\":8,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/scalable-vector-graphic-browsers\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/scalable-vector-graphic-browsers\\\/svg-apple-png.jpg\",\"keywords\":[\"Javascripts\",\"Modernizr\",\"Scalable Vector Graphics (SVG)\"],\"articleSection\":[\"Coding\",\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/scalable-vector-graphic-browsers\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/scalable-vector-graphic-browsers\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/scalable-vector-graphic-browsers\\\/\",\"name\":\"Adding Scalable Vector Graphics (SVG) in Unsupported Browser - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/scalable-vector-graphic-browsers\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/scalable-vector-graphic-browsers\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/scalable-vector-graphic-browsers\\\/svg-apple-png.jpg\",\"datePublished\":\"2012-10-31T13:01:50+00:00\",\"dateModified\":\"2025-04-24T09:17:57+00:00\",\"description\":\"In an earlier post in this series, we have mentioned a bit about SVG's pitfall with old browsers and using Raphael.js to serve the graphic as an\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/scalable-vector-graphic-browsers\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/scalable-vector-graphic-browsers\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/scalable-vector-graphic-browsers\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/scalable-vector-graphic-browsers\\\/svg-apple-png.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/scalable-vector-graphic-browsers\\\/svg-apple-png.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/scalable-vector-graphic-browsers\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Adding Scalable Vector Graphics (SVG) in Unsupported Browser\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Adding Scalable Vector Graphics (SVG) in Unsupported Browser - Hongkiat","description":"In an earlier post in this series, we have mentioned a bit about SVG's pitfall with old browsers and using Raphael.js to serve the graphic as an","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/scalable-vector-graphic-browsers\/","og_locale":"en_US","og_type":"article","og_title":"Adding Scalable Vector Graphics (SVG) in Unsupported Browser","og_description":"In an earlier post in this series, we have mentioned a bit about SVG's pitfall with old browsers and using Raphael.js to serve the graphic as an","og_url":"https:\/\/www.hongkiat.com\/blog\/scalable-vector-graphic-browsers\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2012-10-31T13:01:50+00:00","article_modified_time":"2025-04-24T09:17:57+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/scalable-vector-graphic-browsers\/svg-apple-png.jpg","type":"","width":"","height":""}],"author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/scalable-vector-graphic-browsers\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/scalable-vector-graphic-browsers\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"Adding Scalable Vector Graphics (SVG) in Unsupported Browser","datePublished":"2012-10-31T13:01:50+00:00","dateModified":"2025-04-24T09:17:57+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/scalable-vector-graphic-browsers\/"},"wordCount":614,"commentCount":8,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/scalable-vector-graphic-browsers\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/scalable-vector-graphic-browsers\/svg-apple-png.jpg","keywords":["Javascripts","Modernizr","Scalable Vector Graphics (SVG)"],"articleSection":["Coding","Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/scalable-vector-graphic-browsers\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/scalable-vector-graphic-browsers\/","url":"https:\/\/www.hongkiat.com\/blog\/scalable-vector-graphic-browsers\/","name":"Adding Scalable Vector Graphics (SVG) in Unsupported Browser - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/scalable-vector-graphic-browsers\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/scalable-vector-graphic-browsers\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/scalable-vector-graphic-browsers\/svg-apple-png.jpg","datePublished":"2012-10-31T13:01:50+00:00","dateModified":"2025-04-24T09:17:57+00:00","description":"In an earlier post in this series, we have mentioned a bit about SVG's pitfall with old browsers and using Raphael.js to serve the graphic as an","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/scalable-vector-graphic-browsers\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/scalable-vector-graphic-browsers\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/scalable-vector-graphic-browsers\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/scalable-vector-graphic-browsers\/svg-apple-png.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/scalable-vector-graphic-browsers\/svg-apple-png.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/scalable-vector-graphic-browsers\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Adding Scalable Vector Graphics (SVG) in Unsupported Browser"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-3ZB","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/15351","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=15351"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/15351\/revisions"}],"predecessor-version":[{"id":74119,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/15351\/revisions\/74119"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=15351"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=15351"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=15351"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=15351"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}