{"id":3439,"date":"2025-10-11T14:17:33","date_gmt":"2025-10-11T14:17:33","guid":{"rendered":"https:\/\/webtoolslab.io\/blog\/adaptive-svgs-symbol-use-css-media-queries-2\/"},"modified":"2025-10-11T14:17:33","modified_gmt":"2025-10-11T14:17:33","slug":"adaptive-svgs-symbol-use-css-media-queries-2","status":"publish","type":"post","link":"https:\/\/webtoolslab.io\/blog\/adaptive-svgs-symbol-use-css-media-queries-2\/","title":{"rendered":"Adaptive SVGs with , , and CSS Media Queries"},"content":{"rendered":"
\n

Introduction<\/h2>\n

Welcome to the fifth part of our Smashing Animations<\/strong> series! In this installment, we will explore how to create adaptive SVGs using the <symbol><\/code> and <use><\/code> elements, combined with CSS media queries. This approach allows developers to build scalable and responsive vector graphics that enhance user experience on various devices.<\/p>\n

Why Use SVGs?<\/h2>\n

Scalable Vector Graphics (SVG) are preferred for their scalability, lightweight nature, and ability to maintain quality across different resolutions. They are especially useful for responsive design, where images need to adapt to various screen sizes.<\/p>\n

Getting Started with <symbol><\/code> and <use><\/code><\/h2>\n

The <symbol><\/code> element defines reusable graphics. You can create icons, logos, and any graphic that can be used multiple times. The <use><\/code> element allows you to reference and use these symbols anywhere in your SVG.<\/p>\n

Step 1: Defining Symbols<\/h3>\n

First, we need to define our symbols within the SVG. Here\u2019s how you can do it:<\/p>\n

<svg style=\"display: none;\">\n  <symbol id=\"icon-home\" viewBox=\"0 0 24 24\">\n    <path d=\"M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z\" \/>\n  <\/symbol>\n  <symbol id=\"icon-user\" viewBox=\"0 0 24 24\">\n    <path d=\"M12 12c2.67 0 8 1.34 8 4v1H4v-1c0-2.66 5.33-4 8-4zm0-2C9.33 10 7 7.67 7 5s2.33-5 5-5 5 2.33 5 5-2.33 5-5 5z\" \/>\n  <\/symbol>\n<\/svg><\/code><\/pre>\n
Step 2: Using Symbols<\/h3>\n
Next, we will reference these symbols in our HTML:<\/p>\n
<svg class=\"icon\">\n  <use xlink:href=\"#icon-home\" \/>\n<\/svg>\n\n<svg class=\"icon\">\n  <use xlink:href=\"#icon-user\" \/>\n<\/svg><\/code><\/pre>\n
Step 3: Styling with CSS<\/h3>\n
Now, let’s add some CSS to style our icons and make them adaptive:<\/p>\n
.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
Enhancing Responsiveness with CSS Media Queries<\/h2>\n
CSS media queries allow us to apply different styles based on the viewport size. This is crucial for making our SVGs adaptive. In the example above, we reduced the size of the icons on smaller screens. Here\u2019s a more detailed overview:<\/p>\n
    \n
  1. Define breakpoints:<\/strong> Choose the screen sizes where your design needs to adapt.<\/li>\n
  2. Adjust styles:<\/strong> Use media queries to change properties like size, color, and positioning.<\/li>\n
  3. Test across devices:<\/strong> Always verify your design on different devices to ensure a consistent user experience.<\/li>\n<\/ol>\n
    FAQs<\/h2>\n
    What are the benefits of using SVGs?<\/h3>\n
    SVGs are resolution-independent, lightweight, and easily manipulated through CSS and JavaScript, making them ideal for modern web design.<\/p>\n
    Can SVGs be animated?<\/h3>\n
    Yes, SVGs can be animated using CSS animations or JavaScript libraries, allowing for engaging and interactive designs.<\/p>\n
    How can I minify my SVG files?<\/h3>\n
    You can use tools like HTML Minifier<\/a> to optimize your SVG code for performance.<\/p>\n
    Conclusion<\/h2>\n
    By using <symbol><\/code> and <use><\/code> along with CSS media queries, developers can create adaptive SVGs that enhance the responsiveness of web applications. This method not only improves performance but also streamlines the design process. For more tools to help you with your projects, check out the WebToolsLab (All Tools)<\/a> for resources like the CSS Minifier<\/a> and the JS Minifier<\/a>. Happy coding!<\/p>\n<\/article>\n","protected":false},"excerpt":{"rendered":"
    Learn to build adaptive SVGs using , , and CSS media queries for responsive designs. Step-by-step guide included!<\/p>\n","protected":false},"author":1,"featured_media":2853,"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-3439","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-development"],"yoast_head":"\nAdaptive SVGs with , , and CSS Media Queries - WebToolsLab<\/title>\n<meta name=\"description\" content=\"Learn to build adaptive SVGs using , , and CSS media queries for responsive designs. Step-by-step guide included!\" \/>\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-css-media-queries-2\/\" \/>\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 CSS Media Queries - WebToolsLab\" \/>\n<meta property=\"og:description\" content=\"Learn to build adaptive SVGs using , , and CSS media queries for responsive designs. Step-by-step guide included!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webtoolslab.io\/blog\/adaptive-svgs-symbol-use-css-media-queries-2\/\" \/>\n<meta property=\"og:site_name\" content=\"WebToolsLab\" \/>\n<meta property=\"article:published_time\" content=\"2025-10-11T14:17:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246233518.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-css-media-queries-2\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/adaptive-svgs-symbol-use-css-media-queries-2\\\/\"},\"author\":{\"name\":\"maashraf\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#\\\/schema\\\/person\\\/dc734a267c9220810951a2c42f320fbb\"},\"headline\":\"Adaptive SVGs with , , and CSS Media Queries\",\"datePublished\":\"2025-10-11T14:17:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/adaptive-svgs-symbol-use-css-media-queries-2\\\/\"},\"wordCount\":398,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#\\\/schema\\\/person\\\/dc734a267c9220810951a2c42f320fbb\"},\"image\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/adaptive-svgs-symbol-use-css-media-queries-2\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/1752246233518.webp\",\"articleSection\":[\"Web Development\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/adaptive-svgs-symbol-use-css-media-queries-2\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/adaptive-svgs-symbol-use-css-media-queries-2\\\/\",\"url\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/adaptive-svgs-symbol-use-css-media-queries-2\\\/\",\"name\":\"Adaptive SVGs with , , and CSS Media Queries - WebToolsLab\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/adaptive-svgs-symbol-use-css-media-queries-2\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/adaptive-svgs-symbol-use-css-media-queries-2\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/1752246233518.webp\",\"datePublished\":\"2025-10-11T14:17:33+00:00\",\"description\":\"Learn to build adaptive SVGs using , , and CSS media queries for responsive designs. Step-by-step guide included!\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/adaptive-svgs-symbol-use-css-media-queries-2\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/adaptive-svgs-symbol-use-css-media-queries-2\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/adaptive-svgs-symbol-use-css-media-queries-2\\\/#primaryimage\",\"url\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/1752246233518.webp\",\"contentUrl\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/1752246233518.webp\",\"width\":1820,\"height\":1024,\"caption\":\"1752246233518\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/adaptive-svgs-symbol-use-css-media-queries-2\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Adaptive SVGs with , , and CSS 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 CSS Media Queries - WebToolsLab","description":"Learn to build adaptive SVGs using , , and CSS media queries for responsive designs. Step-by-step guide included!","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-css-media-queries-2\/","og_locale":"en_US","og_type":"article","og_title":"Adaptive SVGs with , , and CSS Media Queries - WebToolsLab","og_description":"Learn to build adaptive SVGs using , , and CSS media queries for responsive designs. Step-by-step guide included!","og_url":"https:\/\/webtoolslab.io\/blog\/adaptive-svgs-symbol-use-css-media-queries-2\/","og_site_name":"WebToolsLab","article_published_time":"2025-10-11T14:17:33+00:00","og_image":[{"width":1820,"height":1024,"url":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246233518.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-css-media-queries-2\/#article","isPartOf":{"@id":"https:\/\/webtoolslab.io\/blog\/adaptive-svgs-symbol-use-css-media-queries-2\/"},"author":{"name":"maashraf","@id":"https:\/\/webtoolslab.io\/blog\/#\/schema\/person\/dc734a267c9220810951a2c42f320fbb"},"headline":"Adaptive SVGs with , , and CSS Media Queries","datePublished":"2025-10-11T14:17:33+00:00","mainEntityOfPage":{"@id":"https:\/\/webtoolslab.io\/blog\/adaptive-svgs-symbol-use-css-media-queries-2\/"},"wordCount":398,"commentCount":0,"publisher":{"@id":"https:\/\/webtoolslab.io\/blog\/#\/schema\/person\/dc734a267c9220810951a2c42f320fbb"},"image":{"@id":"https:\/\/webtoolslab.io\/blog\/adaptive-svgs-symbol-use-css-media-queries-2\/#primaryimage"},"thumbnailUrl":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246233518.webp","articleSection":["Web Development"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webtoolslab.io\/blog\/adaptive-svgs-symbol-use-css-media-queries-2\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webtoolslab.io\/blog\/adaptive-svgs-symbol-use-css-media-queries-2\/","url":"https:\/\/webtoolslab.io\/blog\/adaptive-svgs-symbol-use-css-media-queries-2\/","name":"Adaptive SVGs with , , and CSS Media Queries - WebToolsLab","isPartOf":{"@id":"https:\/\/webtoolslab.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webtoolslab.io\/blog\/adaptive-svgs-symbol-use-css-media-queries-2\/#primaryimage"},"image":{"@id":"https:\/\/webtoolslab.io\/blog\/adaptive-svgs-symbol-use-css-media-queries-2\/#primaryimage"},"thumbnailUrl":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246233518.webp","datePublished":"2025-10-11T14:17:33+00:00","description":"Learn to build adaptive SVGs using , , and CSS media queries for responsive designs. Step-by-step guide included!","breadcrumb":{"@id":"https:\/\/webtoolslab.io\/blog\/adaptive-svgs-symbol-use-css-media-queries-2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webtoolslab.io\/blog\/adaptive-svgs-symbol-use-css-media-queries-2\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webtoolslab.io\/blog\/adaptive-svgs-symbol-use-css-media-queries-2\/#primaryimage","url":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246233518.webp","contentUrl":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246233518.webp","width":1820,"height":1024,"caption":"1752246233518"},{"@type":"BreadcrumbList","@id":"https:\/\/webtoolslab.io\/blog\/adaptive-svgs-symbol-use-css-media-queries-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webtoolslab.io\/blog\/"},{"@type":"ListItem","position":2,"name":"Adaptive SVGs with , , and CSS 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\/1752246233518.webp","uagb_featured_image_src":{"full":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246233518.webp",1820,1024,false],"thumbnail":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246233518-150x150.webp",150,150,true],"medium":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246233518-300x169.webp",300,169,true],"medium_large":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246233518-768x432.webp",768,432,true],"large":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246233518-1024x576.webp",1024,576,true],"1536x1536":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246233518-1536x864.webp",1536,864,true],"2048x2048":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752246233518.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 build adaptive SVGs using , , and CSS media queries for responsive designs. Step-by-step guide included!","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/posts\/3439","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=3439"}],"version-history":[{"count":0,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/posts\/3439\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/media\/2853"}],"wp:attachment":[{"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/media?parent=3439"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/categories?post=3439"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/tags?post=3439"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}