{"id":3473,"date":"2025-10-16T03:08:22","date_gmt":"2025-10-16T03:08:22","guid":{"rendered":"https:\/\/webtoolslab.io\/blog\/adaptive-svgs-symbol-use-media-queries-3\/"},"modified":"2025-10-16T03:08:22","modified_gmt":"2025-10-16T03:08:22","slug":"adaptive-svgs-symbol-use-media-queries-3","status":"publish","type":"post","link":"https:\/\/webtoolslab.io\/blog\/adaptive-svgs-symbol-use-media-queries-3\/","title":{"rendered":"Adaptive SVGs with `<symbol>`, `<use>`, and Media Queries"},"content":{"rendered":"<article>\n<h2>Introduction<\/h2>\n<p>In the world of web development, creating scalable and adaptive graphics is essential for responsive design. Scalable Vector Graphics (SVG) allow developers to use vector images that scale without losing quality. In this fifth installment of our <strong>Smashing Animations<\/strong> series, we&#8217;ll explore how to build adaptive SVGs using the <code>&lt;symbol&gt;<\/code> and <code>&lt;use&gt;<\/code> elements, along with CSS media queries. This combination enables you to create visually appealing graphics that adapt to different screen sizes seamlessly.<\/p>\n<h2>Understanding `<symbol>` and `<use>`<\/h2>\n<p>The <code>&lt;symbol&gt;<\/code> element defines a reusable graphical object that can be used multiple times throughout an SVG. The <code>&lt;use&gt;<\/code> element allows you to instantiate the <code>&lt;symbol&gt;<\/code> multiple times in your SVG, thereby promoting efficiency and reducing redundancy.<\/p>\n<h3>Creating SVG Symbols<\/h3>\n<p>Let&#8217;s start by creating a simple SVG symbol. Below is an example of a circle symbol:<\/p>\n<pre><code>&lt;svg style=&quot;display: none;&quot;&gt;\n  &lt;symbol id=&quot;circle&quot; viewBox=&quot;0 0 100 100&quot;&gt;\n    &lt;circle cx=&quot;50&quot; cy=&quot;50&quot; r=&quot;40&quot; fill=&quot;blue&quot; \/&gt;\n  &lt;\/symbol&gt;\n&lt;\/svg&gt;<\/code><\/pre>\n<h3>Using SVG Symbols<\/h3>\n<p>Now that we have defined our symbol, we can use it throughout our SVG:<\/p>\n<pre><code>&lt;svg width=&quot;100&quot; height=&quot;100&quot;&gt;\n  &lt;use href=&quot;#circle&quot; \/&gt;\n&lt;\/svg&gt;<\/code><\/pre>\n<h2>Making SVGs Adaptive with Media Queries<\/h2>\n<p>To make our SVGs adaptive, we will use CSS media queries. This allows us to change the size or style of the SVG depending on the screen size. Here\u2019s how to do it:<\/p>\n<h3>Step-by-Step Implementation<\/h3>\n<ol>\n<li>Define your SVG and symbols as shown above.<\/li>\n<li>Apply CSS styles using media queries:<\/li>\n<\/ol>\n<pre><code>svg {\n  width: 100%;\n  height: auto;\n}\n\n@media (max-width: 600px) {\n  use {\n    fill: red;\n    width: 50px;\n    height: 50px;\n  }\n}\n\n@media (min-width: 601px) {\n  use {\n    fill: blue;\n    width: 100px;\n    height: 100px;\n  }\n}<\/code><\/pre>\n<h3>Example of Adaptive SVG<\/h3>\n<p>Combining everything, here\u2019s how your complete SVG code might look:<\/p>\n<pre><code>&lt;svg style=&quot;display: none;&quot;&gt;\n  &lt;symbol id=&quot;circle&quot; viewBox=&quot;0 0 100 100&quot;&gt;\n    &lt;circle cx=&quot;50&quot; cy=&quot;50&quot; r=&quot;40&quot; fill=&quot;blue&quot; \/&gt;\n  &lt;\/symbol&gt;\n&lt;\/svg&gt;\n\n&lt;svg&gt;\n  &lt;use href=&quot;#circle&quot; \/&gt;\n&lt;\/svg&gt;<\/code><\/pre>\n<h2>FAQs<\/h2>\n<h3>What are SVG symbols?<\/h3>\n<p>SVG symbols are reusable graphical objects defined within the <code>&lt;symbol&gt;<\/code> element in SVG. They help reduce redundancy in graphic definitions.<\/p>\n<h3>How do media queries affect SVGs?<\/h3>\n<p>Media queries allow you to change the style of SVGs based on the viewport size, enabling responsive designs.<\/p>\n<h3>Can I animate SVGs defined with symbols?<\/h3>\n<p>Yes! You can apply CSS animations or JavaScript to SVG symbols just like any other HTML element.<\/p>\n<h2>Conclusion<\/h2>\n<p>Creating adaptive SVGs using <code>&lt;symbol&gt;<\/code> and <code>&lt;use&gt;<\/code> elements, combined with CSS media queries, is a powerful technique for modern web design. This method not only optimizes your SVG graphics but also enhances usability across various devices. For further optimization, consider using tools like the <a href=\"https:\/\/webtoolslab.io\/tools\/css-minifier.php\">CSS Minifier<\/a> and <a href=\"https:\/\/webtoolslab.io\/tools\/html-minifier.php\">HTML Minifier<\/a> from <a href=\"https:\/\/webtoolslab.io\/\">WebToolsLab<\/a>. Happy coding!<\/p>\n<\/article>\n","protected":false},"excerpt":{"rendered":"<p>Learn to create adaptive SVGs using `<symbol>`, `<use>`, and CSS media queries for responsive designs.<\/p>\n","protected":false},"author":1,"featured_media":2868,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[21],"tags":[],"class_list":["post-3473","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-development"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Adaptive SVGs with ``, ``, and Media Queries - WebToolsLab<\/title>\n<meta name=\"description\" content=\"Learn to create adaptive SVGs using ``, ``, and CSS media queries for responsive designs.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webtoolslab.io\/blog\/adaptive-svgs-symbol-use-media-queries-3\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Adaptive SVGs with ``, ``, and Media Queries - WebToolsLab\" \/>\n<meta property=\"og:description\" content=\"Learn to create adaptive SVGs using ``, ``, and CSS media queries for responsive designs.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webtoolslab.io\/blog\/adaptive-svgs-symbol-use-media-queries-3\/\" \/>\n<meta property=\"og:site_name\" content=\"WebToolsLab\" \/>\n<meta property=\"article:published_time\" content=\"2025-10-16T03:08:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245861013.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1820\" \/>\n\t<meta property=\"og:image:height\" content=\"1024\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"maashraf\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"maashraf\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/adaptive-svgs-symbol-use-media-queries-3\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/adaptive-svgs-symbol-use-media-queries-3\\\/\"},\"author\":{\"name\":\"maashraf\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#\\\/schema\\\/person\\\/dc734a267c9220810951a2c42f320fbb\"},\"headline\":\"Adaptive SVGs with ``, ``, and Media Queries\",\"datePublished\":\"2025-10-16T03:08:22+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/adaptive-svgs-symbol-use-media-queries-3\\\/\"},\"wordCount\":348,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#\\\/schema\\\/person\\\/dc734a267c9220810951a2c42f320fbb\"},\"image\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/adaptive-svgs-symbol-use-media-queries-3\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/1752245861013.webp\",\"articleSection\":[\"Web Development\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/adaptive-svgs-symbol-use-media-queries-3\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/adaptive-svgs-symbol-use-media-queries-3\\\/\",\"url\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/adaptive-svgs-symbol-use-media-queries-3\\\/\",\"name\":\"Adaptive SVGs with ``, ``, and Media Queries - WebToolsLab\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/adaptive-svgs-symbol-use-media-queries-3\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/adaptive-svgs-symbol-use-media-queries-3\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/1752245861013.webp\",\"datePublished\":\"2025-10-16T03:08:22+00:00\",\"description\":\"Learn to create adaptive SVGs using ``, ``, and CSS media queries for responsive designs.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/adaptive-svgs-symbol-use-media-queries-3\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/adaptive-svgs-symbol-use-media-queries-3\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/adaptive-svgs-symbol-use-media-queries-3\\\/#primaryimage\",\"url\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/1752245861013.webp\",\"contentUrl\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/1752245861013.webp\",\"width\":1820,\"height\":1024,\"caption\":\"1752245861013\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/adaptive-svgs-symbol-use-media-queries-3\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Adaptive SVGs with ``, ``, and Media Queries\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/\",\"name\":\"WebToolsLab Free Online Developer Tools\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#\\\/schema\\\/person\\\/dc734a267c9220810951a2c42f320fbb\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#\\\/schema\\\/person\\\/dc734a267c9220810951a2c42f320fbb\",\"name\":\"maashraf\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/favicon-1.png\",\"url\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/favicon-1.png\",\"contentUrl\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/favicon-1.png\",\"width\":96,\"height\":96,\"caption\":\"maashraf\"},\"logo\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/favicon-1.png\"},\"sameAs\":[\"https:\\\/\\\/webtoolslab.io\\\/blog\"],\"url\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/author\\\/maashraf\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Adaptive SVGs with ``, ``, and Media Queries - WebToolsLab","description":"Learn to create adaptive SVGs using ``, ``, and CSS media queries for responsive designs.","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:\/\/webtoolslab.io\/blog\/adaptive-svgs-symbol-use-media-queries-3\/","og_locale":"en_US","og_type":"article","og_title":"Adaptive SVGs with ``, ``, and Media Queries - WebToolsLab","og_description":"Learn to create adaptive SVGs using ``, ``, and CSS media queries for responsive designs.","og_url":"https:\/\/webtoolslab.io\/blog\/adaptive-svgs-symbol-use-media-queries-3\/","og_site_name":"WebToolsLab","article_published_time":"2025-10-16T03:08:22+00:00","og_image":[{"width":1820,"height":1024,"url":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245861013.webp","type":"image\/webp"}],"author":"maashraf","twitter_card":"summary_large_image","twitter_misc":{"Written by":"maashraf","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webtoolslab.io\/blog\/adaptive-svgs-symbol-use-media-queries-3\/#article","isPartOf":{"@id":"https:\/\/webtoolslab.io\/blog\/adaptive-svgs-symbol-use-media-queries-3\/"},"author":{"name":"maashraf","@id":"https:\/\/webtoolslab.io\/blog\/#\/schema\/person\/dc734a267c9220810951a2c42f320fbb"},"headline":"Adaptive SVGs with ``, ``, and Media Queries","datePublished":"2025-10-16T03:08:22+00:00","mainEntityOfPage":{"@id":"https:\/\/webtoolslab.io\/blog\/adaptive-svgs-symbol-use-media-queries-3\/"},"wordCount":348,"commentCount":0,"publisher":{"@id":"https:\/\/webtoolslab.io\/blog\/#\/schema\/person\/dc734a267c9220810951a2c42f320fbb"},"image":{"@id":"https:\/\/webtoolslab.io\/blog\/adaptive-svgs-symbol-use-media-queries-3\/#primaryimage"},"thumbnailUrl":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245861013.webp","articleSection":["Web Development"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webtoolslab.io\/blog\/adaptive-svgs-symbol-use-media-queries-3\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webtoolslab.io\/blog\/adaptive-svgs-symbol-use-media-queries-3\/","url":"https:\/\/webtoolslab.io\/blog\/adaptive-svgs-symbol-use-media-queries-3\/","name":"Adaptive SVGs with ``, ``, and Media Queries - WebToolsLab","isPartOf":{"@id":"https:\/\/webtoolslab.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webtoolslab.io\/blog\/adaptive-svgs-symbol-use-media-queries-3\/#primaryimage"},"image":{"@id":"https:\/\/webtoolslab.io\/blog\/adaptive-svgs-symbol-use-media-queries-3\/#primaryimage"},"thumbnailUrl":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245861013.webp","datePublished":"2025-10-16T03:08:22+00:00","description":"Learn to create adaptive SVGs using ``, ``, and CSS media queries for responsive designs.","breadcrumb":{"@id":"https:\/\/webtoolslab.io\/blog\/adaptive-svgs-symbol-use-media-queries-3\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webtoolslab.io\/blog\/adaptive-svgs-symbol-use-media-queries-3\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webtoolslab.io\/blog\/adaptive-svgs-symbol-use-media-queries-3\/#primaryimage","url":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245861013.webp","contentUrl":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245861013.webp","width":1820,"height":1024,"caption":"1752245861013"},{"@type":"BreadcrumbList","@id":"https:\/\/webtoolslab.io\/blog\/adaptive-svgs-symbol-use-media-queries-3\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webtoolslab.io\/blog\/"},{"@type":"ListItem","position":2,"name":"Adaptive SVGs with ``, ``, and Media Queries"}]},{"@type":"WebSite","@id":"https:\/\/webtoolslab.io\/blog\/#website","url":"https:\/\/webtoolslab.io\/blog\/","name":"WebToolsLab Free Online Developer Tools","description":"","publisher":{"@id":"https:\/\/webtoolslab.io\/blog\/#\/schema\/person\/dc734a267c9220810951a2c42f320fbb"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webtoolslab.io\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/webtoolslab.io\/blog\/#\/schema\/person\/dc734a267c9220810951a2c42f320fbb","name":"maashraf","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/favicon-1.png","url":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/favicon-1.png","contentUrl":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/favicon-1.png","width":96,"height":96,"caption":"maashraf"},"logo":{"@id":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/favicon-1.png"},"sameAs":["https:\/\/webtoolslab.io\/blog"],"url":"https:\/\/webtoolslab.io\/blog\/author\/maashraf\/"}]}},"jetpack_featured_media_url":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245861013.webp","uagb_featured_image_src":{"full":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245861013.webp",1820,1024,false],"thumbnail":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245861013-150x150.webp",150,150,true],"medium":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245861013-300x169.webp",300,169,true],"medium_large":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245861013-768x432.webp",768,432,true],"large":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245861013-1024x576.webp",1024,576,true],"1536x1536":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245861013-1536x864.webp",1536,864,true],"2048x2048":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245861013.webp",1820,1024,false]},"uagb_author_info":{"display_name":"maashraf","author_link":"https:\/\/webtoolslab.io\/blog\/author\/maashraf\/"},"uagb_comment_info":0,"uagb_excerpt":"Learn to create adaptive SVGs using ``, ``, and CSS media queries for responsive designs.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/posts\/3473","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/comments?post=3473"}],"version-history":[{"count":0,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/posts\/3473\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/media\/2868"}],"wp:attachment":[{"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/media?parent=3473"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/categories?post=3473"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/tags?post=3473"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}