{"id":3420,"date":"2025-10-09T08:13:34","date_gmt":"2025-10-09T08:13:34","guid":{"rendered":"https:\/\/webtoolslab.io\/blog\/smashing-animations-part-5-adaptive-svgs-css\/"},"modified":"2025-10-09T08:13:34","modified_gmt":"2025-10-09T08:13:34","slug":"smashing-animations-part-5-adaptive-svgs-css","status":"publish","type":"post","link":"https:\/\/webtoolslab.io\/blog\/smashing-animations-part-5-adaptive-svgs-css\/","title":{"rendered":"Smashing Animations Part 5: Adaptive SVGs with CSS"},"content":{"rendered":"<article>\n<h2>Introduction<\/h2>\n<p>As web developers, we constantly seek ways to enhance user experiences through engaging interfaces. SVG (Scalable Vector Graphics) plays a crucial role in this endeavor, allowing for scalable, high-quality graphics. In this fifth 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, alongside CSS media queries for responsive design.<\/p>\n<h2>Why SVGs?<\/h2>\n<p>SVGs offer several advantages over traditional image formats:<\/p>\n<ul>\n<li>Scalability without loss of quality<\/li>\n<li>Smaller file sizes compared to raster images<\/li>\n<li>Manipulable through CSS and JavaScript<\/li>\n<li>Accessibility features can be added easily<\/li>\n<\/ul>\n<h2>Understanding <code>&lt;symbol&gt;<\/code> and <code>&lt;use&gt;<\/code><\/h2>\n<p>The <code>&lt;symbol&gt;<\/code> element defines reusable SVG content. This can include shapes, paths, and other SVG elements. The <code>&lt;use&gt;<\/code> element allows us to reference and reuse these symbols throughout our document. This practice reduces redundancy and enhances maintainability.<\/p>\n<h2>Step-by-Step: Building Adaptive SVGs<\/h2>\n<h3>Step 1: Create Your SVG Symbols<\/h3>\n<p>First, let\u2019s define our SVG symbols. This can be done within a <code>&lt;svg&gt;<\/code> container:<\/p>\n<pre><code>&lt;svg style=\"display:none;\"&gt;\n    &lt;symbol id=\"icon-arrow\" viewBox=\"0 0 24 24\"&gt;\n        &lt;path d=\"M12 2l10 10H2z\" \/&gt;\n    &lt;\/symbol&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.73 5.82 22 7 14.14 2 9.27l6.91-1.01L12 2z\" \/&gt;\n    &lt;\/symbol&gt;\n&lt;\/svg&gt;<\/code><\/pre>\n<h3>Step 2: Using the Symbols<\/h3>\n<p>Next, use the <code>&lt;use&gt;<\/code> element to reference these symbols in your SVG markup:<\/p>\n<pre><code>&lt;svg width=\"100\" height=\"100\"&gt;\n    &lt;use href=\"#icon-arrow\" \/&gt;\n&lt;\/svg&gt;\n\n&lt;svg width=\"100\" height=\"100\"&gt;\n    &lt;use href=\"#icon-star\" \/&gt;\n&lt;\/svg&gt;<\/code><\/pre>\n<h3>Step 3: Making SVGs Adaptive with CSS<\/h3>\n<p>To ensure that our SVGs adapt to different screen sizes, we can use CSS media queries. Here\u2019s an example:<\/p>\n<pre><code>svg {\n    width: 100%;\n    height: auto;\n}\n\n@media (max-width: 600px) {\n    svg {\n        width: 50%;\n    }\n}<\/code><\/pre>\n<h3>Step 4: Testing Responsiveness<\/h3>\n<p>Use a responsive simulator to test how your SVGs behave at different screen sizes. You can utilize tools like the <a href=\"https:\/\/webtoolslab.io\/tools\/responsive-simulator.php\">Responsive Simulator<\/a> to see instant previews.<\/p>\n<h2>FAQs<\/h2>\n<h3>What are the benefits of using <code>&lt;symbol&gt;<\/code>?<\/h3>\n<p>The <code>&lt;symbol&gt;<\/code> element allows for reusable graphics, reducing redundancy and enhancing loading times.<\/p>\n<h3>Can I style SVGs with CSS?<\/h3>\n<p>Yes, SVGs can be styled using CSS, which allows for dynamic changes based on media queries, hover states, and more.<\/p>\n<h3>Are adaptive SVGs accessible?<\/h3>\n<p>Yes, when properly structured, SVGs can be made accessible to screen readers and other assistive technologies.<\/p>\n<h2>Conclusion<\/h2>\n<p>Creating adaptive SVGs using <code>&lt;symbol&gt;<\/code> and <code>&lt;use&gt;<\/code> elements provides a powerful way to enhance your web design. By leveraging CSS media queries, you ensure that your graphics adapt seamlessly to different devices. Experiment with this approach and consider utilizing tools from <a href=\"https:\/\/webtoolslab.io\/\">WebToolsLab<\/a> for optimizing your SVGs, such as 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> to improve performance. Happy coding!<\/p>\n<\/article>\n","protected":false},"excerpt":{"rendered":"<p>Learn to build adaptive SVGs using <symbol>, <use>, and CSS media queries for responsive design.<\/p>\n","protected":false},"author":1,"featured_media":2881,"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-3420","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>Smashing Animations Part 5: Adaptive SVGs with CSS - WebToolsLab<\/title>\n<meta name=\"description\" content=\"Learn to build 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-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Smashing Animations Part 5: Adaptive SVGs with CSS - WebToolsLab\" \/>\n<meta property=\"og:description\" content=\"Learn to build 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-css\/\" \/>\n<meta property=\"og:site_name\" content=\"WebToolsLab\" \/>\n<meta property=\"article:published_time\" content=\"2025-10-09T08:13:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245471879.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-css\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/smashing-animations-part-5-adaptive-svgs-css\\\/\"},\"author\":{\"name\":\"maashraf\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#\\\/schema\\\/person\\\/dc734a267c9220810951a2c42f320fbb\"},\"headline\":\"Smashing Animations Part 5: Adaptive SVGs with CSS\",\"datePublished\":\"2025-10-09T08:13:34+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/smashing-animations-part-5-adaptive-svgs-css\\\/\"},\"wordCount\":353,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#\\\/schema\\\/person\\\/dc734a267c9220810951a2c42f320fbb\"},\"image\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/smashing-animations-part-5-adaptive-svgs-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/1752245471879.webp\",\"articleSection\":[\"Web Development\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/smashing-animations-part-5-adaptive-svgs-css\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/smashing-animations-part-5-adaptive-svgs-css\\\/\",\"url\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/smashing-animations-part-5-adaptive-svgs-css\\\/\",\"name\":\"Smashing Animations Part 5: Adaptive SVGs with CSS - WebToolsLab\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/smashing-animations-part-5-adaptive-svgs-css\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/smashing-animations-part-5-adaptive-svgs-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/1752245471879.webp\",\"datePublished\":\"2025-10-09T08:13:34+00:00\",\"description\":\"Learn to build adaptive SVGs using , , and CSS media queries for responsive design.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/smashing-animations-part-5-adaptive-svgs-css\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/smashing-animations-part-5-adaptive-svgs-css\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/smashing-animations-part-5-adaptive-svgs-css\\\/#primaryimage\",\"url\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/1752245471879.webp\",\"contentUrl\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/1752245471879.webp\",\"width\":1820,\"height\":1024,\"caption\":\"Comparison of the best free HTML minifiers online for web developers\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/smashing-animations-part-5-adaptive-svgs-css\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/webtoolslab.io\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Smashing Animations Part 5: Adaptive SVGs with CSS\"}]},{\"@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":"Smashing Animations Part 5: Adaptive SVGs with CSS - WebToolsLab","description":"Learn to build 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-css\/","og_locale":"en_US","og_type":"article","og_title":"Smashing Animations Part 5: Adaptive SVGs with CSS - WebToolsLab","og_description":"Learn to build adaptive SVGs using , , and CSS media queries for responsive design.","og_url":"https:\/\/webtoolslab.io\/blog\/smashing-animations-part-5-adaptive-svgs-css\/","og_site_name":"WebToolsLab","article_published_time":"2025-10-09T08:13:34+00:00","og_image":[{"width":1820,"height":1024,"url":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245471879.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-css\/#article","isPartOf":{"@id":"https:\/\/webtoolslab.io\/blog\/smashing-animations-part-5-adaptive-svgs-css\/"},"author":{"name":"maashraf","@id":"https:\/\/webtoolslab.io\/blog\/#\/schema\/person\/dc734a267c9220810951a2c42f320fbb"},"headline":"Smashing Animations Part 5: Adaptive SVGs with CSS","datePublished":"2025-10-09T08:13:34+00:00","mainEntityOfPage":{"@id":"https:\/\/webtoolslab.io\/blog\/smashing-animations-part-5-adaptive-svgs-css\/"},"wordCount":353,"commentCount":0,"publisher":{"@id":"https:\/\/webtoolslab.io\/blog\/#\/schema\/person\/dc734a267c9220810951a2c42f320fbb"},"image":{"@id":"https:\/\/webtoolslab.io\/blog\/smashing-animations-part-5-adaptive-svgs-css\/#primaryimage"},"thumbnailUrl":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245471879.webp","articleSection":["Web Development"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webtoolslab.io\/blog\/smashing-animations-part-5-adaptive-svgs-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webtoolslab.io\/blog\/smashing-animations-part-5-adaptive-svgs-css\/","url":"https:\/\/webtoolslab.io\/blog\/smashing-animations-part-5-adaptive-svgs-css\/","name":"Smashing Animations Part 5: Adaptive SVGs with CSS - WebToolsLab","isPartOf":{"@id":"https:\/\/webtoolslab.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webtoolslab.io\/blog\/smashing-animations-part-5-adaptive-svgs-css\/#primaryimage"},"image":{"@id":"https:\/\/webtoolslab.io\/blog\/smashing-animations-part-5-adaptive-svgs-css\/#primaryimage"},"thumbnailUrl":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245471879.webp","datePublished":"2025-10-09T08:13:34+00:00","description":"Learn to build adaptive SVGs using , , and CSS media queries for responsive design.","breadcrumb":{"@id":"https:\/\/webtoolslab.io\/blog\/smashing-animations-part-5-adaptive-svgs-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webtoolslab.io\/blog\/smashing-animations-part-5-adaptive-svgs-css\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webtoolslab.io\/blog\/smashing-animations-part-5-adaptive-svgs-css\/#primaryimage","url":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245471879.webp","contentUrl":"https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245471879.webp","width":1820,"height":1024,"caption":"Comparison of the best free HTML minifiers online for web developers"},{"@type":"BreadcrumbList","@id":"https:\/\/webtoolslab.io\/blog\/smashing-animations-part-5-adaptive-svgs-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webtoolslab.io\/blog\/"},{"@type":"ListItem","position":2,"name":"Smashing Animations Part 5: Adaptive SVGs with CSS"}]},{"@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\/1752245471879.webp","uagb_featured_image_src":{"full":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245471879.webp",1820,1024,false],"thumbnail":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245471879-150x150.webp",150,150,true],"medium":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245471879-300x169.webp",300,169,true],"medium_large":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245471879-768x432.webp",768,432,true],"large":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245471879-1024x576.webp",1024,576,true],"1536x1536":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245471879-1536x864.webp",1536,864,true],"2048x2048":["https:\/\/webtoolslab.io\/blog\/wp-content\/uploads\/2025\/07\/1752245471879.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 design.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/posts\/3420","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=3420"}],"version-history":[{"count":0,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/posts\/3420\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/media\/2881"}],"wp:attachment":[{"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/media?parent=3420"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/categories?post=3420"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webtoolslab.io\/blog\/wp-json\/wp\/v2\/tags?post=3420"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}