{"id":127,"date":"2021-09-16T08:52:00","date_gmt":"2021-09-16T08:52:00","guid":{"rendered":"http:\/\/iamvector.com\/blogs\/?p=127"},"modified":"2023-09-16T10:43:53","modified_gmt":"2023-09-16T10:43:53","slug":"why-one-should-use-svg-over-png","status":"publish","type":"post","link":"https:\/\/iamvector.com\/blog\/why-one-should-use-svg-over-png\/","title":{"rendered":"Why one should  use SVG over PNG ?"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/iamvector.com\/blog\/why-one-should-use-svg-over-png\/#Lets_have_a_look_at_the_differences_between_SVG_and_PNG\" >Let&#8217;s have a look at the differences between SVG and PNG:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/iamvector.com\/blog\/why-one-should-use-svg-over-png\/#Final_Thoughts\" >Final Thoughts:<\/a><\/li><\/ul><\/nav><\/div>\n\n<p>The Scalable Vector Graphics (SVG) format has become an increasingly popular choice as a web image format in recent years. Compared to traditional image formats such as JPEG and PNG, SVG offers many advantages. This includes scalability, compatibility across platforms and browsers, a smaller file size, and support for animation and interactivity. With all of these advantages, it is easy to see why SVG has become the preferred choice for many web designers and developers.<\/p>\n\n\n\n<p>SVG is a graphics format that enables you to create images with the same quality as PNG but without the file size. This makes it a good choice for images that will be used in web applications or on websites where space is important.<\/p>\n\n\n\n<p>SVG vector standard gives it greater versatility and control than PNG. For example, you can use SVG to create more complex graphics that are not possible with PNG. Additionally, SVG does not suffer from the compression issues that PNG does.<\/p>\n\n\n\n<p>In this blog post, we will discuss the various benefits of using SVG over PNG. Also, why one should consider using it over other image formats. By the end of this article, you should have a better understanding of why SVG is often the preferred choice for web images and why it should be considered when choosing an <a href=\"https:\/\/iamvector.com\/blog\/understand-the-difference-between-png-and-svg-when-to-use-them\/\">image format<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"612\" height=\"500\" src=\"https:\/\/iamvector.com\/blog\/wp-content\/uploads\/2022\/12\/Why-one-should-use-SVG-over-PNG.png\" alt=\"SVG over PNG\" class=\"wp-image-1446\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Lets_have_a_look_at_the_differences_between_SVG_and_PNG\"><\/span>Let&#8217;s have a look at the differences between SVG and PNG:<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Scalable Vector Graphics (SVG)&nbsp;<\/strong><\/h3>\n\n\n\n<p>SVG is used for 2-D-based vector graphics which is an XML-based markup language. It uses geometric forms like points, lines, curves, and shapes (polygons) which represent different parts of the image. It was created by the World Wide Web Consortium (W3C) and debuted in 1999. SVG is an open standard for displaying vector drawings on the web that is extensively supported by current web browsers.<\/p>\n\n\n\n<p>These are based on mathematical equations that define the visuals using geometric shapes, pathways, and text components. SVG graphic is scalable to any size without sacrificing quality, making them perfect for high-resolution and responsive displays. SVG is extensively used on websites to create icons, logos, drawings, charts, and other visuals. It is also used in a variety of other applications such as data visualization, animation, and print media.<\/p>\n\n\n\n<p>As a web designer or developer, you may use text editors or specialist vector graphics applications to generate and modify <strong><a href=\"https:\/\/iamvector.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">SVG icons<\/a><\/strong>. Then embed them straight into your HTML code using the element or reference them using CSS.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><br><strong>Portable Network Graphics (PNG)&nbsp;<\/strong><\/h3>\n\n\n\n<p>It is a replacement for Graphics Interchange Format (GIF). The file format is raster graphics and the data compression is lossless. It is used for high-quality images, detailed icons, or need to prevent transparency.<\/p>\n\n\n\n<p><strong><a href=\"https:\/\/www.techtarget.com\/whatis\/definition\/PNG-Portable-Network-Graphics\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">PNG<\/a><\/strong> is a popular raster graphics file format. It was created as a free and open alternative to proprietary image formats such as GIF (Graphics Interchange Format). It was created in the mid-1990s by an Internet Engineering Task Force (IETF) working group. The primary purpose was to establish a format that might replace GIFs for web graphics while avoiding the patent and licensing concerns associated with GIFs.<\/p>\n\n\n\n<p>PNG files employ lossless compression. This means they can store pictures without sacrificing any quality or information. It keeps the original picture data. This lossless compression often results in greater file sizes than JPEG files for similar photos. It might impair site loading speeds.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><br><strong>Scalability difference in SVG over PNG:<\/strong><\/h3>\n\n\n\n<p>The scalability of SVG and PNG is an essential topic for graphics designers and developers. Both formats are used to create images that can be viewed on many different devices. However, scalability can be a challenge for both forms.<\/p>\n\n\n\n<p>In SVG, the scale change does not change the pixels of the graphics. In other words, the scale does not get pixelated. This means it may be scaled to any size without sacrificing picture quality. Because it is built on mathematical formulae that explain the image&#8217;s shapes and curves. Due to this, it remains crisp and clear at any scale. The reason <strong><a href=\"https:\/\/iamvector.com\/\">Free SVG icons<\/a><\/strong> are scalable without altering the quality.<\/p>\n\n\n\n<p>PNG does not have the same scalability as SVG. It&#8217;s a raster graphics format, which means it has a set grid of pixels. A PNG will look larger when scaled up, but it may suffer from pixelation. The individual pixels become visible, resulting in a loss of visual clarity.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><br><strong>File size:<\/strong><\/h3>\n\n\n\n<p>SVG files are usually smaller than PNG ones. Because SVG is a vector graphics format, rather than storing pixel information, it depicts pictures using mathematical equations that determine shapes and routes. As a result, SVG files are lightweight. It has minimal file sizes, making them suitable for usage on the web and lowering loading times.<\/p>\n\n\n\n<p>PNG files can be bigger than SVG files, especially when pictures include sophisticated features or numerous colors. PNG is a raster graphics format in which pixel information for every pixel in the picture is stored. As a result, file sizes might balloon dramatically, especially for high-resolution photographs.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><br><strong>Performance<\/strong>:<\/h3>\n\n\n\n<p>Because of its reduced file size, scalability, interaction capabilities, and responsiveness, SVG (Scalable Vector Graphics) outperforms PNG. Because SVGs are drawn as vectors by the browser, they may be displayed at any resolution without sacrificing quality. However, complicated SVG or a high quantity of SVGs on a page might have an impact on rendering performance. Especially on older browsers or devices.<\/p>\n\n\n\n<p>Due to its bigger file size and lack of scalability, PNG may have performance disadvantages as compared to SVG. PNGs are raster images that do not require complicated rendering like SVGs. They can be rendered rapidly on most devices, even when there are several PNG pictures on a page.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Style control:<\/strong><\/h3>\n\n\n\n<p>The&nbsp;capacity&nbsp;to&nbsp;change&nbsp;and&nbsp;customize&nbsp;the&nbsp;look&nbsp;or&nbsp;visual&nbsp;design&nbsp;of&nbsp;components&nbsp;in&nbsp;digital&nbsp;media,&nbsp;such&nbsp;as&nbsp;websites,&nbsp;programs,&nbsp;or&nbsp;graphical&nbsp;user&nbsp;interfaces,&nbsp;is&nbsp;referred&nbsp;to&nbsp;as&nbsp;style&nbsp;control. It&nbsp;gives&nbsp;designers&nbsp;and&nbsp;developers&nbsp;control&nbsp;over&nbsp;numerous&nbsp;design&nbsp;components&nbsp;like&nbsp;as&nbsp;colors,&nbsp;font,&nbsp;layout,&nbsp;spacing,&nbsp;and&nbsp;other&nbsp;visual&nbsp;features.<\/p>\n\n\n\n<p>Because of its vector form, SVG offers better style flexibility, simple editability, reduced file sizes, and support for animations using CSS and SMIL. PNG, on the other hand, being a raster format, is more suited for pictures, complex images, and scenarios requiring transparency, but it provides less freedom in terms of style control than SVG. The decision between SVG and PNG will be determined by the individual use case and the sort of image or graphic you wish to offer on your platform.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Final_Thoughts\"><\/span><strong>Final Thoughts:<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>SVG is a graphics format that enables you to create text, images, and logos using a simple two-step process: drawing the basic shapes and then adding color. It&#8217;s more efficient than PNG, making it ideal for faster page loading times. Plus, SVG can be used in web browsers and devices, making it easy to create beautiful visuals for your website or application.<\/p>\n\n\n\n<p>SVG is clearly the better option than PNG. Its vector-based format offers pixel-perfect images on any device by ensuring immaculate scaling and resolution independence. Using SVG gives designers unlimited control over the design elements, allowing for creative freedom and fascinating user interactions. SVG is the perfect picture format for modern web design, with reduced file sizes, faster load times, and SEO-friendly features.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Svg is used for 2-D based vector graphics which is an XML-based markup language. It uses geometric forms like points, lines, curves and shapes (polygons)  to form image<\/p>\n","protected":false},"author":3,"featured_media":136,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rop_custom_images_group":[],"rop_custom_messages_group":[],"rop_publish_now":"initial","rop_publish_now_accounts":[],"rop_publish_now_history":[],"rop_publish_now_status":"pending","footnotes":""},"categories":[71],"tags":[42],"class_list":{"0":"post-127","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-graphic-designing","8":"tag-free-svg-icons"},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>why-one-should-use-svg-over-png<\/title>\n<meta name=\"description\" content=\"We will discuss the various benefits of using SVG over PNG and why one should consider using it over other image formats.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/iamvector.com\/blog\/why-one-should-use-svg-over-png\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"why-one-should-use-svg-over-png\" \/>\n<meta property=\"og:description\" content=\"We will discuss the various benefits of using SVG over PNG and why one should consider using it over other image formats.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/iamvector.com\/blog\/why-one-should-use-svg-over-png\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-09-16T08:52:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-09-16T10:43:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/iamvector.com\/blog\/wp-content\/uploads\/2021\/08\/3-min.png\" \/>\n\t<meta property=\"og:image:width\" content=\"612\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Bhushan Verma\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Bhushan Verma\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/iamvector.com\\\/blog\\\/why-one-should-use-svg-over-png\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/iamvector.com\\\/blog\\\/why-one-should-use-svg-over-png\\\/\"},\"author\":{\"name\":\"Bhushan Verma\",\"@id\":\"https:\\\/\\\/iamvector.com\\\/blog\\\/#\\\/schema\\\/person\\\/fe73c4344668cdfcca00b239296c034d\"},\"headline\":\"Why one should use SVG over PNG ?\",\"datePublished\":\"2021-09-16T08:52:00+00:00\",\"dateModified\":\"2023-09-16T10:43:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/iamvector.com\\\/blog\\\/why-one-should-use-svg-over-png\\\/\"},\"wordCount\":1253,\"image\":{\"@id\":\"https:\\\/\\\/iamvector.com\\\/blog\\\/why-one-should-use-svg-over-png\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/iamvector.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/08\\\/3-min.png\",\"keywords\":[\"Free SVG icons\"],\"articleSection\":[\"Graphic designing\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/iamvector.com\\\/blog\\\/why-one-should-use-svg-over-png\\\/\",\"url\":\"https:\\\/\\\/iamvector.com\\\/blog\\\/why-one-should-use-svg-over-png\\\/\",\"name\":\"why-one-should-use-svg-over-png\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/iamvector.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/iamvector.com\\\/blog\\\/why-one-should-use-svg-over-png\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/iamvector.com\\\/blog\\\/why-one-should-use-svg-over-png\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/iamvector.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/08\\\/3-min.png\",\"datePublished\":\"2021-09-16T08:52:00+00:00\",\"dateModified\":\"2023-09-16T10:43:53+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/iamvector.com\\\/blog\\\/#\\\/schema\\\/person\\\/fe73c4344668cdfcca00b239296c034d\"},\"description\":\"We will discuss the various benefits of using SVG over PNG and why one should consider using it over other image formats.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/iamvector.com\\\/blog\\\/why-one-should-use-svg-over-png\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/iamvector.com\\\/blog\\\/why-one-should-use-svg-over-png\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/iamvector.com\\\/blog\\\/why-one-should-use-svg-over-png\\\/#primaryimage\",\"url\":\"https:\\\/\\\/iamvector.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/08\\\/3-min.png\",\"contentUrl\":\"https:\\\/\\\/iamvector.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/08\\\/3-min.png\",\"width\":612,\"height\":500,\"caption\":\"SVG over PNG\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/iamvector.com\\\/blog\\\/why-one-should-use-svg-over-png\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/iamvector.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Why one should use SVG over PNG ?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/iamvector.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/iamvector.com\\\/blog\\\/\",\"name\":\"\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/iamvector.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/iamvector.com\\\/blog\\\/#\\\/schema\\\/person\\\/fe73c4344668cdfcca00b239296c034d\",\"name\":\"Bhushan Verma\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/blog.iamvector.com\\\/wp-content\\\/uploads\\\/2023\\\/08\\\/New-Project.jpg\",\"url\":\"https:\\\/\\\/blog.iamvector.com\\\/wp-content\\\/uploads\\\/2023\\\/08\\\/New-Project.jpg\",\"contentUrl\":\"https:\\\/\\\/blog.iamvector.com\\\/wp-content\\\/uploads\\\/2023\\\/08\\\/New-Project.jpg\",\"caption\":\"Bhushan Verma\"},\"description\":\"Optimizing life and web-pages. Either you will find me immersed in the world of images and vectors or watching cricket.\",\"url\":\"https:\\\/\\\/iamvector.com\\\/blog\\\/author\\\/bhushan-verma\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"why-one-should-use-svg-over-png","description":"We will discuss the various benefits of using SVG over PNG and why one should consider using it over other image formats.","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:\/\/iamvector.com\/blog\/why-one-should-use-svg-over-png\/","og_locale":"en_US","og_type":"article","og_title":"why-one-should-use-svg-over-png","og_description":"We will discuss the various benefits of using SVG over PNG and why one should consider using it over other image formats.","og_url":"https:\/\/iamvector.com\/blog\/why-one-should-use-svg-over-png\/","article_published_time":"2021-09-16T08:52:00+00:00","article_modified_time":"2023-09-16T10:43:53+00:00","og_image":[{"width":612,"height":500,"url":"https:\/\/iamvector.com\/blog\/wp-content\/uploads\/2021\/08\/3-min.png","type":"image\/png"}],"author":"Bhushan Verma","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Bhushan Verma","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/iamvector.com\/blog\/why-one-should-use-svg-over-png\/#article","isPartOf":{"@id":"https:\/\/iamvector.com\/blog\/why-one-should-use-svg-over-png\/"},"author":{"name":"Bhushan Verma","@id":"https:\/\/iamvector.com\/blog\/#\/schema\/person\/fe73c4344668cdfcca00b239296c034d"},"headline":"Why one should use SVG over PNG ?","datePublished":"2021-09-16T08:52:00+00:00","dateModified":"2023-09-16T10:43:53+00:00","mainEntityOfPage":{"@id":"https:\/\/iamvector.com\/blog\/why-one-should-use-svg-over-png\/"},"wordCount":1253,"image":{"@id":"https:\/\/iamvector.com\/blog\/why-one-should-use-svg-over-png\/#primaryimage"},"thumbnailUrl":"https:\/\/iamvector.com\/blog\/wp-content\/uploads\/2021\/08\/3-min.png","keywords":["Free SVG icons"],"articleSection":["Graphic designing"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/iamvector.com\/blog\/why-one-should-use-svg-over-png\/","url":"https:\/\/iamvector.com\/blog\/why-one-should-use-svg-over-png\/","name":"why-one-should-use-svg-over-png","isPartOf":{"@id":"https:\/\/iamvector.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/iamvector.com\/blog\/why-one-should-use-svg-over-png\/#primaryimage"},"image":{"@id":"https:\/\/iamvector.com\/blog\/why-one-should-use-svg-over-png\/#primaryimage"},"thumbnailUrl":"https:\/\/iamvector.com\/blog\/wp-content\/uploads\/2021\/08\/3-min.png","datePublished":"2021-09-16T08:52:00+00:00","dateModified":"2023-09-16T10:43:53+00:00","author":{"@id":"https:\/\/iamvector.com\/blog\/#\/schema\/person\/fe73c4344668cdfcca00b239296c034d"},"description":"We will discuss the various benefits of using SVG over PNG and why one should consider using it over other image formats.","breadcrumb":{"@id":"https:\/\/iamvector.com\/blog\/why-one-should-use-svg-over-png\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/iamvector.com\/blog\/why-one-should-use-svg-over-png\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/iamvector.com\/blog\/why-one-should-use-svg-over-png\/#primaryimage","url":"https:\/\/iamvector.com\/blog\/wp-content\/uploads\/2021\/08\/3-min.png","contentUrl":"https:\/\/iamvector.com\/blog\/wp-content\/uploads\/2021\/08\/3-min.png","width":612,"height":500,"caption":"SVG over PNG"},{"@type":"BreadcrumbList","@id":"https:\/\/iamvector.com\/blog\/why-one-should-use-svg-over-png\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/iamvector.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Why one should use SVG over PNG ?"}]},{"@type":"WebSite","@id":"https:\/\/iamvector.com\/blog\/#website","url":"https:\/\/iamvector.com\/blog\/","name":"","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/iamvector.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/iamvector.com\/blog\/#\/schema\/person\/fe73c4344668cdfcca00b239296c034d","name":"Bhushan Verma","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blog.iamvector.com\/wp-content\/uploads\/2023\/08\/New-Project.jpg","url":"https:\/\/blog.iamvector.com\/wp-content\/uploads\/2023\/08\/New-Project.jpg","contentUrl":"https:\/\/blog.iamvector.com\/wp-content\/uploads\/2023\/08\/New-Project.jpg","caption":"Bhushan Verma"},"description":"Optimizing life and web-pages. Either you will find me immersed in the world of images and vectors or watching cricket.","url":"https:\/\/iamvector.com\/blog\/author\/bhushan-verma\/"}]}},"_links":{"self":[{"href":"https:\/\/iamvector.com\/blog\/wp-json\/wp\/v2\/posts\/127","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/iamvector.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/iamvector.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/iamvector.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/iamvector.com\/blog\/wp-json\/wp\/v2\/comments?post=127"}],"version-history":[{"count":22,"href":"https:\/\/iamvector.com\/blog\/wp-json\/wp\/v2\/posts\/127\/revisions"}],"predecessor-version":[{"id":2229,"href":"https:\/\/iamvector.com\/blog\/wp-json\/wp\/v2\/posts\/127\/revisions\/2229"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/iamvector.com\/blog\/wp-json\/wp\/v2\/media\/136"}],"wp:attachment":[{"href":"https:\/\/iamvector.com\/blog\/wp-json\/wp\/v2\/media?parent=127"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/iamvector.com\/blog\/wp-json\/wp\/v2\/categories?post=127"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/iamvector.com\/blog\/wp-json\/wp\/v2\/tags?post=127"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}