{"id":3488,"date":"2025-10-17T20:27:55","date_gmt":"2025-10-17T20:27:55","guid":{"rendered":"https:\/\/webtoolslab.io\/blog\/smashing-animations-part-5-adaptive-svgs-2\/"},"modified":"2025-10-17T20:27:55","modified_gmt":"2025-10-17T20:27:55","slug":"smashing-animations-part-5-adaptive-svgs-2","status":"publish","type":"post","link":"https:\/\/webtoolslab.io\/blog\/smashing-animations-part-5-adaptive-svgs-2\/","title":{"rendered":"Adaptive SVGs with `<symbol>`, `<use>`, and CSS Media Queries"},"content":{"rendered":"<article>\n<h2>Introduction<\/h2>\n<p>In the digital landscape, animations are essential for creating engaging user experiences. In this fifth part of our series on smashing animations, we will explore how to build adaptive SVGs using the `<symbol>` and `<use>` elements, combined with CSS media queries. These techniques not only enhance the visual appeal of your web applications but also ensure they are optimized for various devices.<\/p>\n<h2>Understanding SVG Basics<\/h2>\n<p>Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics. SVGs are resolution-independent, which means they look sharp on any device. The `<symbol>` and `<use>` elements allow you to define reusable graphic elements, making your SVGs more efficient and easier to manage.<\/p>\n<h2>Creating Adaptive SVGs<\/h2>\n<h3>Step 1: Define the SVG Symbols<\/h3>\n<p>First, we need to create an SVG file with symbols. Here\u2019s an example of how to define some basic shapes:<\/p>\n<pre><code>&lt;svg style=\"display: none;\"&gt;\n  &lt;symbol id=\"icon-circle\" viewBox=\"0 0 100 100\"&gt;\n    &lt;circle cx=\"50\" cy=\"50\" r=\"40\" fill=\"blue\" \/&gt;\n  &lt;\/symbol&gt;\n  &lt;symbol id=\"icon-square\" viewBox=\"0 0 100 100\"&gt;\n    &lt;rect width=\"100\" height=\"100\" fill=\"red\" \/&gt;\n  &lt;\/symbol&gt;\n&lt;\/svg&gt;<\/code><\/pre>\n<h3>Step 2: Use the SVG Symbols<\/h3>\n<p>Now, we can use the symbols we defined in the SVG by employing the `<use>` element. Here\u2019s how you can include these icons in your HTML:<\/p>\n<pre><code>&lt;svg class=\"icon\"&gt;\n  &lt;use href=\"#icon-circle\" \/&gt;\n&lt;\/svg&gt;\n&lt;svg class=\"icon\"&gt;\n  &lt;use href=\"#icon-square\" \/&gt;\n&lt;\/svg&gt;<\/code><\/pre>\n<h3>Step 3: Adding CSS for Adaptability<\/h3>\n<p>To make your SVGs adaptive, you can use CSS media queries. This allows different styles or even different symbols to be displayed depending on the screen size. Here\u2019s an example:<\/p>\n<pre><code>.icon {\n  width: 50px;\n  height: 50px;\n}\n\n@media (min-width: 600px) {\n  .icon {\n    width: 100px;\n    height: 100px;\n  }\n}<\/code><\/pre>\n<h2>Optimizing SVGs<\/h2>\n<p>To ensure your SVG files are optimized for web performance, consider using tools like the <a href=\"https:\/\/webtoolslab.io\/tools\/html-minifier.php\">HTML Minifier<\/a> and <a href=\"https:\/\/webtoolslab.io\/tools\/css-minifier.php\">CSS Minifier<\/a>. These tools will help reduce file sizes, improving load times.<\/p>\n<h2>FAQs<\/h2>\n<h3>What are `<symbol>` and `<use>` in SVG?<\/h3>\n<p>`<symbol>` is used to define reusable graphics that can be referenced elsewhere in the document using `<use>`. This promotes efficiency and reduces redundancy in SVG code.<\/p>\n<h3>Can SVGs be animated?<\/h3>\n<p>Yes, SVGs can be animated using CSS and JavaScript, making them a powerful tool for creating dynamic web experiences.<\/p>\n<h3>How do I ensure my SVGs are accessible?<\/h3>\n<p>Always include descriptive titles and aria-labels for your SVGs, ensuring they are accessible to screen readers and other assistive technologies.<\/p>\n<h2>Conclusion<\/h2>\n<p>Building adaptive SVGs with `<symbol>`, `<use>`, and CSS media queries is a vital skill for modern web developers. By implementing these techniques, you can create visually appealing and responsive designs that cater to a variety of devices. Don\u2019t forget to optimize your SVGs with tools available at <a href=\"https:\/\/webtoolslab.io\/\">WebToolsLab<\/a> for better performance and user experience.<\/p>\n<\/article>\n","protected":false},"excerpt":{"rendered":"<p>Learn how to create adaptive SVGs using `<symbol>`, `<use>`, and CSS media queries for responsive design.<\/p>\n","protected":false},"author":1,"featured_media":2875,"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-3488","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 CSS Media Queries - WebToolsLab<\/title>\n<meta name=\"description\" content=\"Learn how to create adaptive SVGs using ``, ``, and CSS media queries for responsive design.\" \/>\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\/smashing-animations-part-5-adaptive-svgs-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 how to create adaptive SVGs using ``, ``, and CSS media queries for responsive design.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webtoolslab.io\/blog\/smashing-animations-part-5-adaptive-svgs-2\/\" \/>\n<meta property=\"og:site_name\" content=\"WebToolsLab\" \/>\n<meta property=\"article:published_time\" content=\"2025-10-17T20:27:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245607672.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\\\/smashing-animations-part-5-adaptive-svgs-2\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/smashing-animations-part-5-adaptive-svgs-2\\\/\"},\"author\":{\"name\":\"maashraf\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#\\\/schema\\\/person\\\/dc734a267c9220810951a2c42f320fbb\"},\"headline\":\"Adaptive SVGs with ``, ``, and CSS Media Queries\",\"datePublished\":\"2025-10-17T20:27:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/smashing-animations-part-5-adaptive-svgs-2\\\/\"},\"wordCount\":377,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#\\\/schema\\\/person\\\/dc734a267c9220810951a2c42f320fbb\"},\"image\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/smashing-animations-part-5-adaptive-svgs-2\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/1752245607672.webp\",\"articleSection\":[\"Web Development\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/smashing-animations-part-5-adaptive-svgs-2\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/smashing-animations-part-5-adaptive-svgs-2\\\/\",\"url\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/smashing-animations-part-5-adaptive-svgs-2\\\/\",\"name\":\"Adaptive SVGs with ``, ``, and CSS Media Queries - WebToolsLab\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/smashing-animations-part-5-adaptive-svgs-2\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/smashing-animations-part-5-adaptive-svgs-2\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/1752245607672.webp\",\"datePublished\":\"2025-10-17T20:27:55+00:00\",\"description\":\"Learn how to create adaptive SVGs using ``, ``, and CSS media queries for responsive design.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/smashing-animations-part-5-adaptive-svgs-2\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/smashing-animations-part-5-adaptive-svgs-2\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/smashing-animations-part-5-adaptive-svgs-2\\\/#primaryimage\",\"url\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/1752245607672.webp\",\"contentUrl\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/1752245607672.webp\",\"width\":1820,\"height\":1024,\"caption\":\"Illustration showing JavaScript file before and after minification\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/smashing-animations-part-5-adaptive-svgs-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 how to create adaptive SVGs using ``, ``, and CSS media queries for responsive design.","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\/smashing-animations-part-5-adaptive-svgs-2\/","og_locale":"en_US","og_type":"article","og_title":"Adaptive SVGs with ``, ``, and CSS Media Queries - WebToolsLab","og_description":"Learn how to create adaptive SVGs using ``, ``, and CSS media queries for responsive design.","og_url":"https:\/\/webtoolslab.io\/blog\/smashing-animations-part-5-adaptive-svgs-2\/","og_site_name":"WebToolsLab","article_published_time":"2025-10-17T20:27:55+00:00","og_image":[{"width":1820,"height":1024,"url":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245607672.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\/smashing-animations-part-5-adaptive-svgs-2\/#article","isPartOf":{"@id":"https:\/\/webtoolslab.io\/blog\/smashing-animations-part-5-adaptive-svgs-2\/"},"author":{"name":"maashraf","@id":"https:\/\/webtoolslab.io\/blog\/#\/schema\/person\/dc734a267c9220810951a2c42f320fbb"},"headline":"Adaptive SVGs with ``, ``, and CSS Media Queries","datePublished":"2025-10-17T20:27:55+00:00","mainEntityOfPage":{"@id":"https:\/\/webtoolslab.io\/blog\/smashing-animations-part-5-adaptive-svgs-2\/"},"wordCount":377,"commentCount":0,"publisher":{"@id":"https:\/\/webtoolslab.io\/blog\/#\/schema\/person\/dc734a267c9220810951a2c42f320fbb"},"image":{"@id":"https:\/\/webtoolslab.io\/blog\/smashing-animations-part-5-adaptive-svgs-2\/#primaryimage"},"thumbnailUrl":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245607672.webp","articleSection":["Web Development"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webtoolslab.io\/blog\/smashing-animations-part-5-adaptive-svgs-2\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webtoolslab.io\/blog\/smashing-animations-part-5-adaptive-svgs-2\/","url":"https:\/\/webtoolslab.io\/blog\/smashing-animations-part-5-adaptive-svgs-2\/","name":"Adaptive SVGs with ``, ``, and CSS Media Queries - WebToolsLab","isPartOf":{"@id":"https:\/\/webtoolslab.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webtoolslab.io\/blog\/smashing-animations-part-5-adaptive-svgs-2\/#primaryimage"},"image":{"@id":"https:\/\/webtoolslab.io\/blog\/smashing-animations-part-5-adaptive-svgs-2\/#primaryimage"},"thumbnailUrl":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245607672.webp","datePublished":"2025-10-17T20:27:55+00:00","description":"Learn how to create adaptive SVGs using ``, ``, and CSS media queries for responsive design.","breadcrumb":{"@id":"https:\/\/webtoolslab.io\/blog\/smashing-animations-part-5-adaptive-svgs-2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webtoolslab.io\/blog\/smashing-animations-part-5-adaptive-svgs-2\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webtoolslab.io\/blog\/smashing-animations-part-5-adaptive-svgs-2\/#primaryimage","url":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245607672.webp","contentUrl":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245607672.webp","width":1820,"height":1024,"caption":"Illustration showing JavaScript file before and after minification"},{"@type":"BreadcrumbList","@id":"https:\/\/webtoolslab.io\/blog\/smashing-animations-part-5-adaptive-svgs-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\/1752245607672.webp","uagb_featured_image_src":{"full":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245607672.webp",1820,1024,false],"thumbnail":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245607672-150x150.webp",150,150,true],"medium":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245607672-300x169.webp",300,169,true],"medium_large":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245607672-768x432.webp",768,432,true],"large":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245607672-1024x576.webp",1024,576,true],"1536x1536":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245607672-1536x864.webp",1536,864,true],"2048x2048":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245607672.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 for responsive design.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/posts\/3488","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=3488"}],"version-history":[{"count":0,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/posts\/3488\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/media\/2875"}],"wp:attachment":[{"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/media?parent=3488"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/categories?post=3488"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/tags?post=3488"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}