From the course: Learning SVG

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Define the display size of an SVG

Define the display size of an SVG - SVG Tutorial

From the course: Learning SVG

Start my 1-month free trial

Define the display size of an SVG

“

- [Instructor] Now that you know how to add an inline SVG to your HTML documents, one of the first questions you'll have is, how do I size this to make it fit with my overall design and layout? Here, you have two main routes you can follow, the old school static size route and the modern responsive web design route. Both of these approaches have their uses and neither of them is wrong, they're just different solutions to different problems. Adobe Illustrator takes the old school route by default. You'll remember in the original SVG code, the SVG element here, had width and height attributes, this is the most direct way of sizing an SVG. By setting the width and height attributes on the SVG element manually, you can force the size of the SVG. So if I go in here and say width="100" and height="100", and save, and reload in the browser, you can see the SVG is now 100 pixels wide and 100 pixels tall. This approach is useful if you want consistent sizing of things like icons or if you have…

Contents