{"id":3452,"date":"2025-10-13T08:15:11","date_gmt":"2025-10-13T08:15:11","guid":{"rendered":"https:\/\/webtoolslab.io\/blog\/adaptive-svgs-symbol-use-media-queries\/"},"modified":"2025-10-13T08:15:11","modified_gmt":"2025-10-13T08:15:11","slug":"adaptive-svgs-symbol-use-media-queries","status":"publish","type":"post","link":"https:\/\/webtoolslab.io\/blog\/adaptive-svgs-symbol-use-media-queries\/","title":{"rendered":"Adaptive SVGs with <symbol>, <use>, and Media Queries"},"content":{"rendered":"<article>\n<h2>Introduction<\/h2>\n<p>In the ever-evolving world of web design, adaptive SVGs are becoming increasingly essential. They allow developers to create scalable graphics that adjust seamlessly to various screen sizes and resolutions. In this installment of our <strong>Smashing Animations<\/strong> series, we will explore how to build adaptive SVGs using the <code>&lt;symbol&gt;<\/code> and <code>&lt;use&gt;<\/code> elements, combined with CSS media queries. This combination will enable us to optimize our SVG graphics, making them responsive and efficient.<\/p>\n<h2>Understanding SVG Basics<\/h2>\n<p>SVG (Scalable Vector Graphics) is an XML-based format for vector graphics. It supports interactivity and animation, making it ideal for modern web applications. The <code>&lt;symbol&gt;<\/code> and <code>&lt;use&gt;<\/code> elements enhance reusability and performance of SVG graphics. Here\u2019s a brief overview of these elements:<\/p>\n<ul>\n<li><strong>&lt;symbol&gt;<\/strong>: Defines graphical objects that can be reused.<\/li>\n<li><strong>&lt;use&gt;<\/strong>: Instantiates a <code>&lt;symbol&gt;<\/code> or another SVG element, allowing you to reference it easily.<\/li>\n<\/ul>\n<h2>Step-by-Step Guide to Building Adaptive SVGs<\/h2>\n<h3>Step 1: Create Your SVG Symbols<\/h3>\n<p>First, we need to define our SVG symbols within the <code>&lt;defs&gt;<\/code> section of our SVG file. Below is an example of creating a simple icon:<\/p>\n<pre><code>&lt;svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"display:none;\"&gt;\n  &lt;defs&gt;\n    &lt;symbol id=\"icon-star\" viewBox=\"0 0 24 24\"&gt;\n      &lt;path d=\"M12 .587l3.668 7.568 8.332 1.184-6.032 5.868 1.425 8.308L12 18.897l-7.393 3.888 1.425-8.308-6.032-5.868 8.332-1.184L12 .587z\"\/&gt;\n    &lt;\/symbol&gt;\n  &lt;\/defs&gt;\n&lt;\/svg&gt;<\/code><\/pre>\n<h3>Step 2: Use the Symbols in Your HTML<\/h3>\n<p>Now that we have our symbols, we can incorporate them into our HTML. We\u2019ll use the <code>&lt;use&gt;<\/code> element to reference our star icon:<\/p>\n<pre><code>&lt;svg class=\"icon\" aria-hidden=\"true\"&gt;\n  &lt;use href=\"#icon-star\" \/&gt;\n&lt;\/svg&gt;<\/code><\/pre>\n<h3>Step 3: Add CSS for Styling<\/h3>\n<p>To ensure our SVGs adapt to different screen sizes, we\u2019ll apply CSS styles. Here\u2019s how you can style the icons:<\/p>\n<pre><code>.icon {\n  width: 50px;\n  height: 50px;\n  fill: currentColor;\n}\n\n@media (max-width: 600px) {\n  .icon {\n    width: 30px;\n    height: 30px;\n  }\n}<\/code><\/pre>\n<h3>Step 4: Implement Media Queries for Responsiveness<\/h3>\n<p>Media queries allow us to adjust the size of our SVG icons based on the viewport. You can customize the styles further based on your design requirements. Here\u2019s an example:<\/p>\n<pre><code>@media (max-width: 400px) {\n  .icon {\n    width: 20px;\n    height: 20px;\n  }\n}<\/code><\/pre>\n<h2>Testing Your Adaptive SVGs<\/h2>\n<p>Once you have implemented your adaptive SVGs, it&#8217;s crucial to test them across various devices. You can use our <a href=\"https:\/\/webtoolslab.io\/tools\/responsive-simulator.php\">Responsive Simulator<\/a> to see how your graphics perform on different screen sizes.<\/p>\n<h2>FAQs<\/h2>\n<h3>What are the benefits of using SVGs?<\/h3>\n<p>SVGs are resolution-independent, meaning they look sharp on any display. They also allow for smaller file sizes compared to raster images, improving load times.<\/p>\n<h3>Can I animate SVGs?<\/h3>\n<p>Yes! SVGs can be animated using CSS, JavaScript, or SMIL (Synchronized Multimedia Integration Language).<\/p>\n<h3>How do I optimize my SVG files?<\/h3>\n<p>You can use tools like the <a href=\"https:\/\/webtoolslab.io\/tools\/html-minifier.php\">HTML Minifier<\/a> or <a href=\"https:\/\/webtoolslab.io\/tools\/css-minifier.php\">CSS Minifier<\/a> to reduce file size and improve performance.<\/p>\n<h2>Conclusion<\/h2>\n<p>Creating adaptive SVGs with <code>&lt;symbol&gt;<\/code>, <code>&lt;use&gt;<\/code>, and CSS media queries not only enhances the responsiveness of your web designs but also increases their efficiency. By following the steps outlined above, you can implement scalable graphics that look great on any device. For more tools to aid your web development journey, visit the <a href=\"https:\/\/webtoolslab.io\/\">WebToolsLab (All Tools)<\/a>.<\/p>\n<\/article>\n","protected":false},"excerpt":{"rendered":"<p>Learn how to create adaptive SVGs using <symbol>, <use>, and CSS media queries. Enhance your web designs today!<\/p>\n","protected":false},"author":1,"featured_media":2854,"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-3452","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 how to create adaptive SVGs using , , and CSS media queries. Enhance your web designs today!\" \/>\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\/\" \/>\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 how to create adaptive SVGs using , , and CSS media queries. Enhance your web designs today!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webtoolslab.io\/blog\/adaptive-svgs-symbol-use-media-queries\/\" \/>\n<meta property=\"og:site_name\" content=\"WebToolsLab\" \/>\n<meta property=\"article:published_time\" content=\"2025-10-13T08:15:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246212326.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\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/adaptive-svgs-symbol-use-media-queries\\\/\"},\"author\":{\"name\":\"maashraf\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#\\\/schema\\\/person\\\/dc734a267c9220810951a2c42f320fbb\"},\"headline\":\"Adaptive SVGs with , , and Media Queries\",\"datePublished\":\"2025-10-13T08:15:11+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/adaptive-svgs-symbol-use-media-queries\\\/\"},\"wordCount\":439,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#\\\/schema\\\/person\\\/dc734a267c9220810951a2c42f320fbb\"},\"image\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/adaptive-svgs-symbol-use-media-queries\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/1752246212326.webp\",\"articleSection\":[\"Web Development\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/adaptive-svgs-symbol-use-media-queries\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/adaptive-svgs-symbol-use-media-queries\\\/\",\"url\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/adaptive-svgs-symbol-use-media-queries\\\/\",\"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\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/adaptive-svgs-symbol-use-media-queries\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/1752246212326.webp\",\"datePublished\":\"2025-10-13T08:15:11+00:00\",\"description\":\"Learn how to create adaptive SVGs using , , and CSS media queries. Enhance your web designs today!\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/adaptive-svgs-symbol-use-media-queries\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/adaptive-svgs-symbol-use-media-queries\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/adaptive-svgs-symbol-use-media-queries\\\/#primaryimage\",\"url\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/1752246212326.webp\",\"contentUrl\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/1752246212326.webp\",\"width\":1820,\"height\":1024,\"caption\":\"1752246212326\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/adaptive-svgs-symbol-use-media-queries\\\/#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 how to create adaptive SVGs using , , and CSS media queries. Enhance your web designs today!","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\/","og_locale":"en_US","og_type":"article","og_title":"Adaptive SVGs with , , and Media Queries - WebToolsLab","og_description":"Learn how to create adaptive SVGs using , , and CSS media queries. Enhance your web designs today!","og_url":"https:\/\/webtoolslab.io\/blog\/adaptive-svgs-symbol-use-media-queries\/","og_site_name":"WebToolsLab","article_published_time":"2025-10-13T08:15:11+00:00","og_image":[{"width":1820,"height":1024,"url":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246212326.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\/#article","isPartOf":{"@id":"https:\/\/webtoolslab.io\/blog\/adaptive-svgs-symbol-use-media-queries\/"},"author":{"name":"maashraf","@id":"https:\/\/webtoolslab.io\/blog\/#\/schema\/person\/dc734a267c9220810951a2c42f320fbb"},"headline":"Adaptive SVGs with , , and Media Queries","datePublished":"2025-10-13T08:15:11+00:00","mainEntityOfPage":{"@id":"https:\/\/webtoolslab.io\/blog\/adaptive-svgs-symbol-use-media-queries\/"},"wordCount":439,"commentCount":0,"publisher":{"@id":"https:\/\/webtoolslab.io\/blog\/#\/schema\/person\/dc734a267c9220810951a2c42f320fbb"},"image":{"@id":"https:\/\/webtoolslab.io\/blog\/adaptive-svgs-symbol-use-media-queries\/#primaryimage"},"thumbnailUrl":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246212326.webp","articleSection":["Web Development"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webtoolslab.io\/blog\/adaptive-svgs-symbol-use-media-queries\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webtoolslab.io\/blog\/adaptive-svgs-symbol-use-media-queries\/","url":"https:\/\/webtoolslab.io\/blog\/adaptive-svgs-symbol-use-media-queries\/","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\/#primaryimage"},"image":{"@id":"https:\/\/webtoolslab.io\/blog\/adaptive-svgs-symbol-use-media-queries\/#primaryimage"},"thumbnailUrl":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246212326.webp","datePublished":"2025-10-13T08:15:11+00:00","description":"Learn how to create adaptive SVGs using , , and CSS media queries. Enhance your web designs today!","breadcrumb":{"@id":"https:\/\/webtoolslab.io\/blog\/adaptive-svgs-symbol-use-media-queries\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webtoolslab.io\/blog\/adaptive-svgs-symbol-use-media-queries\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webtoolslab.io\/blog\/adaptive-svgs-symbol-use-media-queries\/#primaryimage","url":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246212326.webp","contentUrl":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246212326.webp","width":1820,"height":1024,"caption":"1752246212326"},{"@type":"BreadcrumbList","@id":"https:\/\/webtoolslab.io\/blog\/adaptive-svgs-symbol-use-media-queries\/#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\/1752246212326.webp","uagb_featured_image_src":{"full":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246212326.webp",1820,1024,false],"thumbnail":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246212326-150x150.webp",150,150,true],"medium":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246212326-300x169.webp",300,169,true],"medium_large":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246212326-768x432.webp",768,432,true],"large":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246212326-1024x576.webp",1024,576,true],"1536x1536":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246212326-1536x864.webp",1536,864,true],"2048x2048":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246212326.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 how to create adaptive SVGs using , , and CSS media queries. Enhance your web designs today!","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/posts\/3452","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=3452"}],"version-history":[{"count":0,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/posts\/3452\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/media\/2854"}],"wp:attachment":[{"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/media?parent=3452"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/categories?post=3452"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/tags?post=3452"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}