How to scale svg icon sizes

Question

Here is the code:

<style> .alignlef { display: inline; float: left; margin-right: 1.625em; } </style> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" viewBox="0 0 100 100"> <symbol id="beac" viewBox="0 0 100 100"> <path fill="#85D4EE" d="M28.947, 56.486 c15.685-11.277, 23.532-21.592, 27.222-29.46c4.311-9.193, 0.561-20.589-8.845-24.413 C36.268-1.88, 28.947, 8.486, 28.947, 8.486S21.678-1.907, 10.623, 2.588C1.217, 6.412-2.533, 17.808, 1.778, 27.001 C5.468, 34.868, 13.262, 45.21, 28.947, 56.486z"/> </symbol> </svg> <div class="alignlef"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="256" height="256" viewBox="0 0 256 256"> <use width ="256" height="256" xlink:href="#beac" /> </svg> </div> <div class="alignlef"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="144" height="144" viewBox="0 0 144 144"> <use width ="144" height="144" xlink:href="#beac" /> </svg> </div> <div class="alignlef"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128" viewBox="0 0 128 128"> <use width ="128" height="128" xlink:href="#beac" /> </svg> </div> <div class="alignlef"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="96" height="96" viewBox="0 0 96 96"> <use width ="96" height="96" xlink:href="#beac" /> </svg> </div> <div class="alignlef"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="72" height="72" viewBox="0 0 72 72"> <use width ="72" height="72" xlink:href="#beac" /></svg> </div> <div class="alignlef"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64" viewBox="0 0 64 64"> <use width ="64" height="64" xlink:href="#beac" /></svg> </div> <div class="alignlef"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" viewBox="0 0 48 48"> <use width ="48" height="48" xlink:href="#beac" /></svg> </div> <div class="alignlef"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32"> <use width ="32" height="32" xlink:href="#beac" /></svg> </div> <div class="alignlef"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24"> <use width ="24" height="24" xlink:href="#beac" /></svg> </div> <div class="alignlef"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16"> <use width ="16" height="16" xlink:href="#beac" /></svg> </div>

With a size of 256 pixels, the size of the svg icon is not 256 пикселей , but somewhere around ~140
When specifying 128 , also not 128 , etc. Why it happens?
I have already re-read all these manuals, in the examples of their icons, everything is normally displayed with dimensions, and why does this not work as it should?!

Accepted Answer · 2018-03-12T13:55:10

The scale is determined by the ratio viewport / viewBox , where viewport is width="X" height="Y"

In your example, scaling is applied sequentially several times.
It is very easy to get confused. Therefore, I will simplify your example as much as possible and will gradually complicate it to practical application.

Below is an example where scaling is applied only once in the svg file header.

viewport / viewBox = viewport / viewBox = 1. The scale will be 1: 1 That is, as drawn in the vector editor, it will be reflected on the display

On the screen of the vector editor you can see that physically the icon has dimensions - 56.6 х 56.6px

Now run the same file in the browser. And for clarity, I added a red rectangle, through the styles in the file header, which shows the borders of the SVG file.
style="border:1px solid red;"

 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" viewBox="0 0 100 100" style="border:1px solid red;"> <path fill="#85D4EE" d="M28.947, 56.486 c15.685-11.277, 23.532-21.592, 27.222-29.46c4.311-9.193, 0.561-20.589-8.845-24.413 C36.268-1.88, 28.947, 8.486, 28.947, 8.486S21.678-1.907, 10.623, 2.588C1.217, 6.412-2.533, 17.808, 1.778, 27.001 C5.468, 34.868, 13.262, 45.21, 28.947, 56.486z"/>

The svg border is defined by the viewport - width="100" height="100"

From the examples it can be seen that the 56 х 56px does not fully occupy the viewport - 100 х 100px

This is very bad, as these free spaces add padding from other HTML layout elements.

Remove extra padding

To do this, reduce the viewport to the size of the icon

width="56" height="56" viewBox="0 0 58 58"

See the results in the vector editor and in the browser:

Browser example

 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="56" height="56" viewBox="0 0 58 58" style="border:1px solid red;"> <path fill="#85D4EE" d="M28.947, 56.486 c15.685-11.277, 23.532-21.592, 27.222-29.46c4.311-9.193, 0.561-20.589-8.845-24.413 C36.268-1.88, 28.947, 8.486, 28.947, 8.486S21.678-1.907, 10.623, 2.588C1.217, 6.412-2.533, 17.808, 1.778, 27.001 C5.468, 34.868, 13.262, 45.21, 28.947, 56.486z"/> </svg>

Scaling icons to desired size

256 x 256px

To do this, increase the size of the viewport to the required size.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="256" height="256" viewBox="0 0 58 58"

Check in the vector editor

Check in the browser

 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="256" height="256" viewBox="0 0 58 58" style="border:1px solid red;"> <path fill="#85D4EE" d="M28.947, 56.486 c15.685-11.277, 23.532-21.592, 27.222-29.46c4.311-9.193, 0.561-20.589-8.845-24.413 C36.268-1.88, 28.947, 8.486, 28.947, 8.486S21.678-1.907, 10.623, 2.588C1.217, 6.412-2.533, 17.808, 1.778, 27.001 C5.468, 34.868, 13.262, 45.21, 28.947, 56.486z"/> </svg>

Size 128 x 128px

check in the vector editor

Making a working version of the application

The basic rule of successive scaling in a single SVG file

In the header of the SVG file, the largest viewport is defined - this is a rectangular area that the user sees on the screen. If given width="256" height="256" , then subsequent scaling, which go in the code below, can only reduce the size of this area.

An example with 3 icons 256x256; 128x128; 64x64 256x256; 128x128; 64x64

  .alignlef { display: inline; float: left; margin-right: 1.625em; } path { fill:inherit; stroke:inherit; }

 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="256" height="256" viewBox="0 0 58 58" > <symbol id="beac"> <path fill="none" d="M28.947, 56.486 c15.685-11.277, 23.532-21.592, 27.222-29.46c4.311-9.193, 0.561-20.589-8.845-24.413 C36.268-1.88, 28.947, 8.486, 28.947, 8.486S21.678-1.907, 10.623, 2.588C1.217, 6.412-2.533, 17.808, 1.778, 27.001 C5.468, 34.868, 13.262, 45.21, 28.947, 56.486z"/> </symbol> </svg> <div class="alignlef"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="256" height="256" viewBox="0 0 58 58"> <use xlink:href="#beac" fill="dodgerblue" /> </svg> </div> <div class="alignlef"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128" viewBox="0 0 58 58"> <use xlink:href="#beac" fill="crimson" /> </svg> </div> <div class="alignlef"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64" viewBox="0 0 58 58"> <use xlink:href="#beac" fill="purple" /> </svg> </div>

I will put it necessarily, but one thing remains — from the bottom and small indents remain above, how to defeat them?
And then you can know this source code svg correct it to the right proportions?

How to scale svg icon sizes

1 answer 1

Scaling icons to desired size

Making a working version of the application

More articles: