6

Вот есть код:

<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 и т.д. Почему так происходит?
Я уже перечитал все эти мануалы, в примерах их иконки все нормально отображаются с размерами, а почему эта не работает как надо?!

1 ответ 1

12

Масштаб определяется соотношением 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>

5
  • Поставлю обязательно, но вот осталась одна вещь-снизу и сверху остались небольшие отступы, как победить их? 12 мар 2018 в 15:24
  • а почему нельзя этот зазор убрать? Забавно. я масштабировал иконку по урокам на вашем сайте 12 мар 2018 в 15:30
  • То есть она нарисовала не в пропорции, так? А можно тогда зная этот исходный код свг поправить ее до нужных пропорций? 12 мар 2018 в 15:44
  • Вот по рекомендации я уже понял. Но как их выбрать? везде черти что 12 мар 2018 в 15:44
  • Понял. все. сейчас будет. 12 мар 2018 в 15:53

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.