Содержимое svg во всю ширину и высоту?

Question

[Ярослав Студеникин]

Gulp'ом и плагинами создаю svg спрайт. в верстке использую конструкцию:

<svg class="socials__icon socials__icon--twitter">
                    <use xlink:href="img/sprite.svg#twitter"></use>
                </svg>

Обнаружил, что при описании стилей иконкам (стили пишу обращаяясь к непосредственно тегу svg) графическая часть иконок не соответствует этому размеру. С svg опыта мало, да и нагуглить по этой проблеме ничего не удалось.

В частности: задаю фиксированые размеры 26x26 для svg. А ее содержимое стоит в размерах 19.5x19.5

Как можно добиться полной ширины и высоты? Заранее спасибо.

Comments

[Ankhena]

Делайте песочницу на jsfiddle.net - посмотрим.

[Сергей delphinpro]

Нужно подкорректировать сами svg-файлы.
Как это делаю я:

1. Открыть файл в люстре.
   
2. Задать размеры монтажной области 256х256 (можно другие, но лучше сделать одинаковые для всех иконок)
   
3. Выделить все контуры
   
4. Отмасштабировать до размера 256 (не забыть включить замочек для фиксации пропорций сторон)
   
5. Центрировать внутри монтажной области
   
6. Опционально сделать пиксельное выравнивание
   
7. Сохранить файл
   

Потому уже из этого подготовленного файла делаем спрайты.

Answer 1

[arsenty]

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

Comments

[Ярослав Студеникин]

как выход указывать родительскому элементу размер больше, корректируюя "на глаз"?

[arsenty]

Нет, в SVG изначально должны быть отступы (потому вы их и видите во всех иконках). Потенциальные проблемы при отсутствии отступов, внешними стилями не обойти. В вашем случае более корректным решением будет добавление отрицательных отступов (margin-left: -5px) элементу через который вы встраиваете иконку (<svg>).

[Ярослав Студеникин]

arsenty, Не встречал такого решения, подскажите пожалуйста.
В html встраиваю иконку, например, вот так:

<a class="socials__item" href="javascript:void(0)">
    <svg class="socials__icon socials__icon--fb">
        <use xlink:href="img/sprite.svg#fb"></use>
    </svg>
 </a>

Я правильно понимаю, что отрицательные маржины нужно делать у тега svg, в данном случае?

[arsenty]

Ярослав Студеникин, да, у тега SVG, на величину размера отступов от svg-холста самой иконки, ну или на глаз, относительно чего вы хотите выровнять иконку.

[Ярослав Студеникин]

arsenty, Спасибо! буду тестировать ваш совет