{"id":3511,"date":"2025-10-20T14:22:17","date_gmt":"2025-10-20T14:22:17","guid":{"rendered":"https:\/\/webtoolslab.io\/blog\/adaptive-svgs-symbol-use-media-queries-4\/"},"modified":"2025-10-20T14:22:17","modified_gmt":"2025-10-20T14:22:17","slug":"adaptive-svgs-symbol-use-media-queries-4","status":"publish","type":"post","link":"https:\/\/webtoolslab.io\/blog\/adaptive-svgs-symbol-use-media-queries-4\/","title":{"rendered":"Adaptive SVGs with `<symbol>`, `<use>`, and Media Queries"},"content":{"rendered":"<article>\n<h2>Introduction<\/h2>\n<p>In the world of modern web development, SVGs (Scalable Vector Graphics) play a crucial role in delivering sharp and scalable graphics. This fifth part of our series on smashing animations dives into building adaptive SVGs using the `<symbol>` and `<use>` elements alongside CSS media queries. These techniques will allow you to create responsive graphics that adjust to different screen sizes while optimizing performance.<\/p>\n<h2>Understanding SVG Elements<\/h2>\n<p>SVG is an XML-based vector image format that allows for high-quality graphics on the web. Two key elements for creating reusable graphics are `<symbol>` and `<use>`.<\/p>\n<h3>The `<symbol>` Element<\/h3>\n<p>The `<symbol>` element defines a reusable graphic within your SVG. It can be defined once and used multiple times throughout your document without duplicating the SVG code.<\/p>\n<pre><code>&lt;svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"display:none;\"&gt;\n  &lt;symbol id=\"icon-star\" viewBox=\"0 0 24 24\"&gt;\n    &lt;path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.77 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z\"\/&gt;\n  &lt;\/symbol&gt;\n&lt;\/svg&gt;<\/code><\/pre>\n<h3>The `<use>` Element<\/h3>\n<p>The `<use>` element lets you instantiate the defined `<symbol>` anywhere in your SVG or HTML code, referencing its ID.<\/p>\n<pre><code>&lt;svg width=\"100\" height=\"100\"&gt;\n  &lt;use xlink:href=\"#icon-star\" fill=\"gold\"\/&gt;\n&lt;\/svg&gt;<\/code><\/pre>\n<h2>Making SVGs Adaptive with CSS Media Queries<\/h2>\n<p>To make your SVGs responsive, CSS media queries allow you to change their size based on the viewport dimensions. This ensures that your graphics maintain their quality and visual appeal across different devices.<\/p>\n<h3>Step-by-Step Guide<\/h3>\n<ol>\n<li><strong>Define your SVG symbols:<\/strong> Create your SVG symbols using the `<symbol>` element as shown above.<\/li>\n<li><strong>Use the `<use>` element:<\/strong> Place the symbols within your HTML using the `<use>` tag.<\/li>\n<li><strong>Add CSS media queries:<\/strong> Use CSS to adjust the size of your SVG based on screen size.<\/li>\n<\/ol>\n<h3>Example Code<\/h3>\n<pre><code>&lt;style&gt;\n  svg {\n    width: 50px;\n    height: 50px;\n  }\n\n  @media (min-width: 600px) {\n    svg {\n      width: 100px;\n      height: 100px;\n    }\n  }\n\n  @media (min-width: 1200px) {\n    svg {\n      width: 150px;\n      height: 150px;\n    }\n  }\n&lt;\/style&gt;\n\n&lt;svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\"&gt;\n  &lt;use xlink:href=\"#icon-star\" fill=\"gold\"\/&gt;\n&lt;\/svg&gt;<\/code><\/pre>\n<h2>Optimizing SVGs for Better Performance<\/h2>\n<p>While SVGs are lightweight by nature, optimizing them further can enhance performance. Consider using 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 WebToolsLab to reduce file sizes.<\/p>\n<h2>FAQs<\/h2>\n<h3>Can I animate SVGs using CSS?<\/h3>\n<p>Yes, SVGs can be animated using CSS animations and transitions, allowing for creative visual effects.<\/p>\n<h3>What browsers support SVGs?<\/h3>\n<p>All modern browsers support SVGs, making them a reliable choice for web graphics.<\/p>\n<h3>How can I test my SVG designs?<\/h3>\n<p>Use tools like the <a href=\"https:\/\/webtoolslab.io\/tools\/responsive-simulator.php\">Responsive Simulator<\/a> to view how your SVGs appear on different devices.<\/p>\n<h2>Conclusion<\/h2>\n<p>Building adaptive SVGs using `<symbol>`, `<use>`, and CSS media queries is a powerful technique in modern web design. By utilizing these methods, you can create scalable graphics that enhance the user experience across devices. Explore more tools and resources at <a href=\"https:\/\/webtoolslab.io\/\">WebToolsLab<\/a> to optimize your development process.<\/p>\n<\/article>\n","protected":false},"excerpt":{"rendered":"<p>Learn to create adaptive SVGs using `<symbol>`, `<use>`, and CSS media queries. Enhance your web designs effectively!<\/p>\n","protected":false},"author":1,"featured_media":2882,"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-3511","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. Enhance your web designs effectively!\" \/>\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-4\/\" \/>\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. Enhance your web designs effectively!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webtoolslab.io\/blog\/adaptive-svgs-symbol-use-media-queries-4\/\" \/>\n<meta property=\"og:site_name\" content=\"WebToolsLab\" \/>\n<meta property=\"article:published_time\" content=\"2025-10-20T14:22:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245439711.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=\"2 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-4\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/adaptive-svgs-symbol-use-media-queries-4\\\/\"},\"author\":{\"name\":\"maashraf\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#\\\/schema\\\/person\\\/dc734a267c9220810951a2c42f320fbb\"},\"headline\":\"Adaptive SVGs with ``, ``, and Media Queries\",\"datePublished\":\"2025-10-20T14:22:17+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/adaptive-svgs-symbol-use-media-queries-4\\\/\"},\"wordCount\":366,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#\\\/schema\\\/person\\\/dc734a267c9220810951a2c42f320fbb\"},\"image\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/adaptive-svgs-symbol-use-media-queries-4\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/1752245439711.webp\",\"articleSection\":[\"Web Development\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/adaptive-svgs-symbol-use-media-queries-4\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/adaptive-svgs-symbol-use-media-queries-4\\\/\",\"url\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/adaptive-svgs-symbol-use-media-queries-4\\\/\",\"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-4\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/adaptive-svgs-symbol-use-media-queries-4\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/1752245439711.webp\",\"datePublished\":\"2025-10-20T14:22:17+00:00\",\"description\":\"Learn to create adaptive SVGs using ``, ``, and CSS media queries. Enhance your web designs effectively!\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/adaptive-svgs-symbol-use-media-queries-4\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/adaptive-svgs-symbol-use-media-queries-4\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/adaptive-svgs-symbol-use-media-queries-4\\\/#primaryimage\",\"url\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/1752245439711.webp\",\"contentUrl\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/1752245439711.webp\",\"width\":1820,\"height\":1024,\"caption\":\"Webp Convertor\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/adaptive-svgs-symbol-use-media-queries-4\\\/#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. Enhance your web designs effectively!","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-4\/","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. Enhance your web designs effectively!","og_url":"https:\/\/webtoolslab.io\/blog\/adaptive-svgs-symbol-use-media-queries-4\/","og_site_name":"WebToolsLab","article_published_time":"2025-10-20T14:22:17+00:00","og_image":[{"width":1820,"height":1024,"url":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245439711.webp","type":"image\/webp"}],"author":"maashraf","twitter_card":"summary_large_image","twitter_misc":{"Written by":"maashraf","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webtoolslab.io\/blog\/adaptive-svgs-symbol-use-media-queries-4\/#article","isPartOf":{"@id":"https:\/\/webtoolslab.io\/blog\/adaptive-svgs-symbol-use-media-queries-4\/"},"author":{"name":"maashraf","@id":"https:\/\/webtoolslab.io\/blog\/#\/schema\/person\/dc734a267c9220810951a2c42f320fbb"},"headline":"Adaptive SVGs with ``, ``, and Media Queries","datePublished":"2025-10-20T14:22:17+00:00","mainEntityOfPage":{"@id":"https:\/\/webtoolslab.io\/blog\/adaptive-svgs-symbol-use-media-queries-4\/"},"wordCount":366,"commentCount":0,"publisher":{"@id":"https:\/\/webtoolslab.io\/blog\/#\/schema\/person\/dc734a267c9220810951a2c42f320fbb"},"image":{"@id":"https:\/\/webtoolslab.io\/blog\/adaptive-svgs-symbol-use-media-queries-4\/#primaryimage"},"thumbnailUrl":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245439711.webp","articleSection":["Web Development"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webtoolslab.io\/blog\/adaptive-svgs-symbol-use-media-queries-4\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webtoolslab.io\/blog\/adaptive-svgs-symbol-use-media-queries-4\/","url":"https:\/\/webtoolslab.io\/blog\/adaptive-svgs-symbol-use-media-queries-4\/","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-4\/#primaryimage"},"image":{"@id":"https:\/\/webtoolslab.io\/blog\/adaptive-svgs-symbol-use-media-queries-4\/#primaryimage"},"thumbnailUrl":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245439711.webp","datePublished":"2025-10-20T14:22:17+00:00","description":"Learn to create adaptive SVGs using ``, ``, and CSS media queries. Enhance your web designs effectively!","breadcrumb":{"@id":"https:\/\/webtoolslab.io\/blog\/adaptive-svgs-symbol-use-media-queries-4\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webtoolslab.io\/blog\/adaptive-svgs-symbol-use-media-queries-4\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webtoolslab.io\/blog\/adaptive-svgs-symbol-use-media-queries-4\/#primaryimage","url":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245439711.webp","contentUrl":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245439711.webp","width":1820,"height":1024,"caption":"Webp Convertor"},{"@type":"BreadcrumbList","@id":"https:\/\/webtoolslab.io\/blog\/adaptive-svgs-symbol-use-media-queries-4\/#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\/1752245439711.webp","uagb_featured_image_src":{"full":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245439711.webp",1820,1024,false],"thumbnail":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245439711-150x150.webp",150,150,true],"medium":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245439711-300x169.webp",300,169,true],"medium_large":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245439711-768x432.webp",768,432,true],"large":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245439711-1024x576.webp",1024,576,true],"1536x1536":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245439711-1536x864.webp",1536,864,true],"2048x2048":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245439711.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. Enhance your web designs effectively!","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/posts\/3511","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=3511"}],"version-history":[{"count":0,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/posts\/3511\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/media\/2882"}],"wp:attachment":[{"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/media?parent=3511"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/categories?post=3511"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/tags?post=3511"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}