From the course: Design the Web: Using Symbols in SVG

Unlock this course with a free trial

Join today to access over 22,600 courses taught by industry experts.

How SVG sizing works

How SVG sizing works - Illustrator Tutorial

From the course: Design the Web: Using Symbols in SVG

Start my 1-month free trial Buy for my team

How SVG sizing works

“

- Now, to begin this course, we're gonna take the symbols.html file and open this up in your favorite text editor. Now, with this file open, you'll see this is a typical html5 document. In the heading area, we have some style elements. These individual styles target elements inside of the SVG. We're not gonna be doing anything with CSS in this particular course, but I do have another course in the Design the Web series that covers controlling SVG elements with CSS. Now, down here in the body element, we have SVG here. This is an in-line SVG, which means all of the SVG code is inside of the html document. We're not referencing a separate SVG file. And I wanna talk a little bit about how this sizing is working inside of this particular graphic. You'll see up here, we have SVG, and then we have a width and a height. We have the width set to 600 and a height set to 700, but we also have view box settings. These are set to zero, zero, 300, and 350. This 300 by 350 is the size of the…

Contents