{"id":4336,"date":"2022-05-11T09:38:34","date_gmt":"2022-05-11T09:38:34","guid":{"rendered":"https:\/\/www.wikitechy.com\/interview-questions\/?p=4336"},"modified":"2022-05-11T09:38:34","modified_gmt":"2022-05-11T09:38:34","slug":"what-is-svg-and-why-is-it-used","status":"publish","type":"post","link":"https:\/\/www.wikitechy.com\/interview-questions\/web-designing\/what-is-svg-and-why-is-it-used\/","title":{"rendered":"What is SVG and why is it used ?"},"content":{"rendered":"<ul>\n<li>SVG- Scalar Vector Graphics.<\/li>\n<li>It is a popular tool for displaying two-dimensional charts, graphics and illustrations on websites.<\/li>\n<li>Without losing any of its resolution it can be scaled up or down.<\/li>\n<li>It can be animated in every element and attribute.<\/li>\n<li>SVG images are stored in XML text files and defined in a Vector graphics.<\/li>\n<li>SVG files can be\u00a0compressed,\u00a0scripted, indexed, and\u00a0searched and \u00a0scaled\u00a0in size without loss of quality.<\/li>\n<li>They are rendered by most used web browsers and Then the XML text files can be created and edited with\u00a0vector graphics editors\u00a0or\u00a0 text editors.<\/li>\n<li>At any resolution SVG images can be printed with high quality.<\/li>\n<li>If they are zoomed or resized SVG graphics do NOT lose any quality.<\/li>\n<\/ul>\n<p><strong>Syntax:<\/strong><\/p>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <\/div> <pre class=\"language-markup code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-markup code-embed-code\"><!DOCTYPE html><br\/><html><br\/>   <body><br\/>      <h1>My first SVG<\/h1><br\/>      <svg width=&quot;100&quot; height=&quot;100&quot;><br\/>         <circle cx=&quot;50&quot; cy=&quot;50&quot; r=&quot;40&quot; stroke=&quot;blue&quot; stroke-width=&quot;4&quot; fill=&quot;pink&quot; \/><br\/>         Sorry, your browser does not support inline SVG.<br\/>      <\/svg><br\/>   <\/body><br\/><\/html><\/code><\/pre> <\/div>\n<p>\u00a0<\/p>\n<p><strong>Output:<\/strong><\/p>\n<p><img fetchpriority=\"high\" decoding=\"async\" class=\"alignnone size-full wp-image-4338\" src=\"https:\/\/www.wikitechy.com\/interview-questions\/wp-content\/uploads\/2022\/05\/what-is-an-svg-file.png\" alt=\"\" width=\"1151\" height=\"578\" srcset=\"https:\/\/www.wikitechy.com\/interview-questions\/wp-content\/uploads\/2022\/05\/what-is-an-svg-file.png 1151w, https:\/\/www.wikitechy.com\/interview-questions\/wp-content\/uploads\/2022\/05\/what-is-an-svg-file-300x151.png 300w, https:\/\/www.wikitechy.com\/interview-questions\/wp-content\/uploads\/2022\/05\/what-is-an-svg-file-1024x514.png 1024w, https:\/\/www.wikitechy.com\/interview-questions\/wp-content\/uploads\/2022\/05\/what-is-an-svg-file-768x386.png 768w, https:\/\/www.wikitechy.com\/interview-questions\/wp-content\/uploads\/2022\/05\/what-is-an-svg-file-390x196.png 390w, https:\/\/www.wikitechy.com\/interview-questions\/wp-content\/uploads\/2022\/05\/what-is-an-svg-file-820x412.png 820w\" sizes=\"(max-width: 1151px) 100vw, 1151px\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>SVG- Scalar Vector Graphics. It is a popular tool for displaying two-dimensional charts, graphics and illustrations on websites. Without losing any of its resolution it can be scaled up or down. It can be animated in every element and attribute. SVG images are stored in XML text files and defined in a Vector graphics. SVG [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17079],"tags":[17301,17312,17311,17305,17310,17306,17303,17309,17304,17300,17308,17307,17302],"class_list":["post-4336","post","type-post","status-publish","format-standard","hentry","category-web-designing","tag-benefits-of-using-svg","tag-how-to-create-svg-files","tag-how-to-open-svg-file","tag-need-to-open-a-svg-file","tag-svg-file-photoshop","tag-svg-images","tag-svg-tutorial","tag-what-is-a-svg-file-for-cricut","tag-what-is-an-svg-file","tag-what-is-an-svg-file-used-for","tag-what-is-svg-file","tag-why-use-svg-in-html","tag-why-you-should-be-using-svg"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>What is SVG and why is it used ? - What is an SVG File - Wikitechy<\/title>\n<meta name=\"description\" content=\"What is SVG and why is it used ? - Scalar Vector Graphics. It is a popular tool for displaying two-dimensional charts, graphics.\" \/>\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.wikitechy.com\/interview-questions\/web-designing\/what-is-svg-and-why-is-it-used\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"What is SVG and why is it used ? - What is an SVG File - Wikitechy\" \/>\n<meta property=\"og:description\" content=\"What is SVG and why is it used ? - Scalar Vector Graphics. It is a popular tool for displaying two-dimensional charts, graphics.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.wikitechy.com\/interview-questions\/web-designing\/what-is-svg-and-why-is-it-used\/\" \/>\n<meta property=\"og:site_name\" content=\"Wikitechy\" \/>\n<meta property=\"article:published_time\" content=\"2022-05-11T09:38:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.wikitechy.com\/interview-questions\/wp-content\/uploads\/2022\/05\/what-is-an-svg-file.png\" \/>\n<meta name=\"author\" content=\"webmaster\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"webmaster\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/web-designing\\\/what-is-svg-and-why-is-it-used\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/web-designing\\\/what-is-svg-and-why-is-it-used\\\/\"},\"author\":{\"name\":\"webmaster\",\"@id\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/#\\\/schema\\\/person\\\/f785ba3ecc599133e65ab6138042a3e4\"},\"headline\":\"What is SVG and why is it used ?\",\"datePublished\":\"2022-05-11T09:38:34+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/web-designing\\\/what-is-svg-and-why-is-it-used\\\/\"},\"wordCount\":205,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/web-designing\\\/what-is-svg-and-why-is-it-used\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/wp-content\\\/uploads\\\/2022\\\/05\\\/what-is-an-svg-file.png\",\"keywords\":[\"benefits of using svg\",\"how to create svg files\",\"how to open svg file\",\"need to open a svg file\",\"svg file photoshop\",\"SVG images\",\"svg tutorial\",\"what is a svg file for cricut\",\"what is an svg file\",\"what is an svg file used for\",\"what is svg file\",\"why use svg in html\",\"why you should be using svg\"],\"articleSection\":[\"Web Designing\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/web-designing\\\/what-is-svg-and-why-is-it-used\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/web-designing\\\/what-is-svg-and-why-is-it-used\\\/\",\"url\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/web-designing\\\/what-is-svg-and-why-is-it-used\\\/\",\"name\":\"What is SVG and why is it used ? - What is an SVG File - Wikitechy\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/web-designing\\\/what-is-svg-and-why-is-it-used\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/web-designing\\\/what-is-svg-and-why-is-it-used\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/wp-content\\\/uploads\\\/2022\\\/05\\\/what-is-an-svg-file.png\",\"datePublished\":\"2022-05-11T09:38:34+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/#\\\/schema\\\/person\\\/f785ba3ecc599133e65ab6138042a3e4\"},\"description\":\"What is SVG and why is it used ? - Scalar Vector Graphics. It is a popular tool for displaying two-dimensional charts, graphics.\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/web-designing\\\/what-is-svg-and-why-is-it-used\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/web-designing\\\/what-is-svg-and-why-is-it-used\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/wp-content\\\/uploads\\\/2022\\\/05\\\/what-is-an-svg-file.png\",\"contentUrl\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/wp-content\\\/uploads\\\/2022\\\/05\\\/what-is-an-svg-file.png\",\"width\":1151,\"height\":578},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/#website\",\"url\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/\",\"name\":\"Wikitechy\",\"description\":\"Interview Questions\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/#\\\/schema\\\/person\\\/f785ba3ecc599133e65ab6138042a3e4\",\"name\":\"webmaster\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/155b77fd8cdda3d0913fcb7e7ee63543b0c345d2d8f6dcebda5b0583ab61f967?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/155b77fd8cdda3d0913fcb7e7ee63543b0c345d2d8f6dcebda5b0583ab61f967?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/155b77fd8cdda3d0913fcb7e7ee63543b0c345d2d8f6dcebda5b0583ab61f967?s=96&d=mm&r=g\",\"caption\":\"webmaster\"},\"sameAs\":[\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\"],\"url\":\"https:\\\/\\\/www.wikitechy.com\\\/interview-questions\\\/author\\\/webmaster\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"What is SVG and why is it used ? - What is an SVG File - Wikitechy","description":"What is SVG and why is it used ? - Scalar Vector Graphics. It is a popular tool for displaying two-dimensional charts, graphics.","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.wikitechy.com\/interview-questions\/web-designing\/what-is-svg-and-why-is-it-used\/","og_locale":"en_US","og_type":"article","og_title":"What is SVG and why is it used ? - What is an SVG File - Wikitechy","og_description":"What is SVG and why is it used ? - Scalar Vector Graphics. It is a popular tool for displaying two-dimensional charts, graphics.","og_url":"https:\/\/www.wikitechy.com\/interview-questions\/web-designing\/what-is-svg-and-why-is-it-used\/","og_site_name":"Wikitechy","article_published_time":"2022-05-11T09:38:34+00:00","og_image":[{"url":"https:\/\/www.wikitechy.com\/interview-questions\/wp-content\/uploads\/2022\/05\/what-is-an-svg-file.png","type":"","width":"","height":""}],"author":"webmaster","twitter_card":"summary_large_image","twitter_misc":{"Written by":"webmaster","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.wikitechy.com\/interview-questions\/web-designing\/what-is-svg-and-why-is-it-used\/#article","isPartOf":{"@id":"https:\/\/www.wikitechy.com\/interview-questions\/web-designing\/what-is-svg-and-why-is-it-used\/"},"author":{"name":"webmaster","@id":"https:\/\/www.wikitechy.com\/interview-questions\/#\/schema\/person\/f785ba3ecc599133e65ab6138042a3e4"},"headline":"What is SVG and why is it used ?","datePublished":"2022-05-11T09:38:34+00:00","mainEntityOfPage":{"@id":"https:\/\/www.wikitechy.com\/interview-questions\/web-designing\/what-is-svg-and-why-is-it-used\/"},"wordCount":205,"commentCount":0,"image":{"@id":"https:\/\/www.wikitechy.com\/interview-questions\/web-designing\/what-is-svg-and-why-is-it-used\/#primaryimage"},"thumbnailUrl":"https:\/\/www.wikitechy.com\/interview-questions\/wp-content\/uploads\/2022\/05\/what-is-an-svg-file.png","keywords":["benefits of using svg","how to create svg files","how to open svg file","need to open a svg file","svg file photoshop","SVG images","svg tutorial","what is a svg file for cricut","what is an svg file","what is an svg file used for","what is svg file","why use svg in html","why you should be using svg"],"articleSection":["Web Designing"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.wikitechy.com\/interview-questions\/web-designing\/what-is-svg-and-why-is-it-used\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.wikitechy.com\/interview-questions\/web-designing\/what-is-svg-and-why-is-it-used\/","url":"https:\/\/www.wikitechy.com\/interview-questions\/web-designing\/what-is-svg-and-why-is-it-used\/","name":"What is SVG and why is it used ? - What is an SVG File - Wikitechy","isPartOf":{"@id":"https:\/\/www.wikitechy.com\/interview-questions\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.wikitechy.com\/interview-questions\/web-designing\/what-is-svg-and-why-is-it-used\/#primaryimage"},"image":{"@id":"https:\/\/www.wikitechy.com\/interview-questions\/web-designing\/what-is-svg-and-why-is-it-used\/#primaryimage"},"thumbnailUrl":"https:\/\/www.wikitechy.com\/interview-questions\/wp-content\/uploads\/2022\/05\/what-is-an-svg-file.png","datePublished":"2022-05-11T09:38:34+00:00","author":{"@id":"https:\/\/www.wikitechy.com\/interview-questions\/#\/schema\/person\/f785ba3ecc599133e65ab6138042a3e4"},"description":"What is SVG and why is it used ? - Scalar Vector Graphics. It is a popular tool for displaying two-dimensional charts, graphics.","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.wikitechy.com\/interview-questions\/web-designing\/what-is-svg-and-why-is-it-used\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.wikitechy.com\/interview-questions\/web-designing\/what-is-svg-and-why-is-it-used\/#primaryimage","url":"https:\/\/www.wikitechy.com\/interview-questions\/wp-content\/uploads\/2022\/05\/what-is-an-svg-file.png","contentUrl":"https:\/\/www.wikitechy.com\/interview-questions\/wp-content\/uploads\/2022\/05\/what-is-an-svg-file.png","width":1151,"height":578},{"@type":"WebSite","@id":"https:\/\/www.wikitechy.com\/interview-questions\/#website","url":"https:\/\/www.wikitechy.com\/interview-questions\/","name":"Wikitechy","description":"Interview Questions","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.wikitechy.com\/interview-questions\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.wikitechy.com\/interview-questions\/#\/schema\/person\/f785ba3ecc599133e65ab6138042a3e4","name":"webmaster","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/155b77fd8cdda3d0913fcb7e7ee63543b0c345d2d8f6dcebda5b0583ab61f967?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/155b77fd8cdda3d0913fcb7e7ee63543b0c345d2d8f6dcebda5b0583ab61f967?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/155b77fd8cdda3d0913fcb7e7ee63543b0c345d2d8f6dcebda5b0583ab61f967?s=96&d=mm&r=g","caption":"webmaster"},"sameAs":["https:\/\/www.wikitechy.com\/interview-questions"],"url":"https:\/\/www.wikitechy.com\/interview-questions\/author\/webmaster\/"}]}},"_links":{"self":[{"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/posts\/4336","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/comments?post=4336"}],"version-history":[{"count":2,"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/posts\/4336\/revisions"}],"predecessor-version":[{"id":4347,"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/posts\/4336\/revisions\/4347"}],"wp:attachment":[{"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/media?parent=4336"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/categories?post=4336"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wikitechy.com\/interview-questions\/wp-json\/wp\/v2\/tags?post=4336"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}