40 | Scaling SVGs with CSS

https://is1-ssl.mzstatic.com/image/thumb/Podcasts221/v4/7c/99/9e/7c999ede-70a2-8f34-3339-50cafd318598/mza_12391085593945925057.jpg/600x600bb.jpg

design-code.tips

ositaka

59 episodes

3 days ago

Welcome to design-code.tips — the podcast where modern web-dev, thoughtful UI design, and practical AI workflows converge. Each episode expands on a blog post from design-code.tips, adding audio-only extras: hands-on demos, performance tricks, and real stories from shipping products. Expect clear take-aways on React, Tailwind, accessibility, and how to leverage AI for faster prototyping and smarter coding. Created by Nuno Marques (a.k.a. ositaka) – your calm, actionable learning companion. (Episodes created with the help of Notebook LM.)

How To

Education

RSS

All content for design-code.tips is the property of ositaka and is served directly from their servers with no modification, redirects, or rehosting. The podcast is not affiliated with or endorsed by Podjoint in any way.

How To

Education

https://d3t3ozftmdmh3i.cloudfront.net/staging/podcast_uploaded_nologo/43939069/43939069-1750674875975-64f82b1907564.jpg

40 | Scaling SVGs with CSS

design-code.tips

5 minutes 46 seconds

1 month ago

40 | Scaling SVGs with CSS

In this episode, we explore a CSS-only method for scaling SVG images without JavaScript. Learn how to wrap your SVG in a div, clean up unnecessary attributes, and use CSS tricks like padding-bottom and viewBox to make your graphics fully responsive. Discover how to maintain perfect proportions while fitting any container—complete with a CodePen example. Tune in to master this lightweight, flexible SVG technique!

Read the full blog post: How to Scale an SVG with CSS Only