Как масштабировать размеры иконок svg

169

13 марта 2018, 00:46

Вот есть код:

<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>

При размерах 256 пикселей размер svg иконки не 256 пикселей, а где-то ~140
При указании 128, тоже не 128 и т.д. Почему так происходит?
Я уже перечитал все эти мануалы, в примерах их иконки все нормально отображаются с размерами, а почему эта не работает как надо?!

Answer 1

Интересный вопрос!

В вашем примере затронута одна из фундаментальных тем SVG - масштабирование. Поймете, как это работает и в svg будет всё легко и просто.

Масштаб определяется соотношением viewport / viewBox, где viewport это width="X" height="Y"

В вашем примере масштабирование применяется последовательно несколько раз.
Очень легко запутаться. Поэтому я максимально упрощу ваш пример и поэтапно буду усложнять до практического применения

Ниже пример, где применяется масштабирование только один раз в шапке svg файла

viewport / viewBox = 100/100=1. Масштаб будет - 1:1 То есть как нарисовано в векторном редакторе, так и будет отражаться на дисплее

На скрине векторного редактора видно, что физически иконка имеет габариты - 56.6 х 56.6px

Теперь запускаем этот же файл в браузере. И для наглядности я добавил красный прямоугольник, через стили в шапке файла, который показывает границы SVG файла.

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"/>

Границы svg определяет viewport это - width="100" height="100"

Из примеров видно, что иконка 56 х 56px не полностью занимает viewport - 100 х 100px

Это очень плохо, так как эти свободные пространства добавляют отступы от других элементов верстки HTML

Убираем лишние отступы

Для этого уменьшаем viewport до размеров иконки

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

Смотрим результаты в векторном редакторе и в браузере:

Пример в браузере

<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>

Масштабирование иконок до требуемых размеров

Размер 256 x 256px

Для этого увеличиваем размер viewport до требуемых размеров

<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"

Проверяем в векторном редакторе

Проверяем в браузере

<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>

Размер 128 x 128px

проверяем в векторном редакторе

Делаем рабочую версию приложения

Основное правило последовательных масштабирований в одном файле SVG

В шапке файла SVG задается самый большой viewport - это прямоугольная область, которую видит пользователь на экране. Если задали width="256" height="256", то последующие масштабирования, которые идут в коде ниже могут только уменьшать размер этой области.

Пример с 3 иконками 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>