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.

Size used SVG symbols

Size used SVG symbols - SVG Tutorial

From the course: Learning SVG

Start my 1-month free trial

Size used SVG symbols

“

- [Instructor] Using symbols and the use element to display SVG graphics requires a bit of a rethink both for sizing and applying specific CSS to each individual instance. That's because technically the SVG symbol is only defined once, we're just displaying shadow copies of it via the use element. That means whatever view box sizing and CSS we apply to the symbol element will dictate how the graphic is displayed when a use element is calling for it. In our example the view box of the symbol matches the view box of the overall SVG. That's because they were drawn together so if we scale them to match they will match when we superimpose one on top of the other. So what happens if I change the view box values? So I'll go into the symbol here where we have the view box 00 617 617 and you'll remember that if we change the width or height values inside the view box what we're effectively doing is reducing the width of the view box, which will result in a cropping of the symbol. So if I set…

Contents