Задать вопрос
delphinpro

Сергей delphinpro

frontend developer
Ответы пользователя по тегу SVG

  • Как правильно кешировать SVG спрайт?

    delphinpro
    @delphinpro Куратор тега JavaScript
    frontend developer
    ну так 304 - это и есть редирект на кэшированный ресурс. То есть указание браузеру, что он не изменился, и можно взять кешированный без повторной загрузки
    Ответ написан
    3 комментария
    3 комментария

  • Как правильно подключить svg спрайт?

    delphinpro
    @delphinpro Куратор тега HTML
    frontend developer
    НО вот тут у меня сомнения, что каждый раз используя use xlink у меня будут идти запросы к этому файлу.

    Запрос будет один, потом файл попадет в кэш браузера.
    Ответ написан
    1 комментарий
    1 комментарий

  • Как закинуть все содержимое картинок svg в файл и импортировать его в основной html?

    delphinpro
    @delphinpro Куратор тега HTML
    frontend developer
    Делаете символьный спрайт

    sprite.svg
    <svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    width="0"
    height="0"
    style="position:absolute">

    <symbol id="i-info" viewBox="0 0 24 53">
        <path fill-rule="evenodd"
            clip-rule="evenodd"
            d="M0 16.6472C0 19.117 6.83992 17.5307 8.71918 22.8157C9.02356 23.6717 9.07117 24.33 9.01033 25.2678C8.95139 26.1764 8.65722 26.8974 8.37127 27.57L2.30835 41.8859C1.59726 43.5717 1.02151 44.6056 1.02151 46.8256C1.02151 52.3906 6.11696 52.5445 10.7723 52.5445C13.2274 52.5445 15.0646 52.1655 17.3285 51.6294C18.8049 51.2798 22.5012 50.6714 22.2197 49.1735C22.0704 48.3789 20.8287 47.8641 20.0707 47.6062C18.1098 46.939 16.8139 46.5091 15.5819 44.6443C14.7153 43.3325 14.6726 42.3873 14.6726 40.9307C14.6726 39.9473 15.1202 39.0355 15.4288 38.3038C15.7601 37.5184 16.1064 36.7437 16.4503 35.9282C17.1264 34.3254 17.8157 32.7376 18.5068 31.1018C19.3018 29.2197 20.8418 25.8336 21.5574 23.962C22.3606 21.8616 22.5746 19.2728 21.3563 17.2656C20.9099 16.5302 20.234 15.9176 19.3446 15.5642C17.7774 14.9415 14.9967 14.5621 12.8117 14.5391C12.2078 14.5328 11.7793 14.4232 11.0479 14.4448C10.6042 14.4578 10.6228 14.5153 10.2156 14.5361C9.88526 14.5529 9.52354 14.5185 9.19316 14.5352C8.11557 14.5898 6.82609 14.8073 5.83743 14.9632C4.59249 15.1595 0 15.6578 0 16.6472ZM12.2581 5.12142C12.2581 8.85849 16.3288 11.3274 20.0208 9.74856C20.273 9.64069 20.6122 9.44198 20.8421 9.29492C23.3021 7.72142 24.0191 3.87691 21.5683 1.57968C19.8597 -0.0217601 17.4431 -0.441426 15.3513 0.485421C14.1185 1.03168 13.3069 1.91689 12.7522 3.03802C12.5016 3.54467 12.2581 4.41535 12.2581 5.12142Z"
            fill="currentColor"/>
    </symbol>
    <symbol id="i-star" viewBox="0 0 19 18">
        <path d="M9.5 0L11.6329 6.56434H18.535L12.9511 10.6213L15.084 17.1857L9.5 13.1287L3.91604 17.1857L6.04892 10.6213L0.464963 6.56434H7.36712L9.5 0Z"
            fill="currentColor"/>
    </symbol>
</svg>


    Потом используете его. Можно скопипастить в тело страницы, а можно и во внешнем файле оставить (см поддержку, там вроде только IE не понимает внешние файлы).

    <svg class="icon">
  <use xlink:href="/img/sprite.svg#i-star" xmlns:xlink="http://www.w3.org/1999/xlink"/>
</svg>
    Ответ написан
    Комментировать
    Комментировать

  • Работа с svg. Инлайнить или нет? Как мёрджить svg вместе с эфектами из Photoshop?

    delphinpro
    @delphinpro Куратор тега HTML
    frontend developer
    Я использую либо символьные спрайты, либо инлайн.
    Все иконки ручками корректирую в люстре. Привожу к единому вьюбоксу, центрирую и выравниваю по пикселям.
    Ответ написан
    2 комментария
    2 комментария

  • Почему svg теряет свой размер и вообще исчезает?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer 
    .my-flex-box svg {
  flex-shrink: 0; // запретить ужиматься во флекс-контексте
}
    Ответ написан
    Комментировать
    Комментировать

  • Как сделать, что бы svg-изображение внутри контейнера svg всегда было по центру?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    1. Откройте в Иллюстраторе.
    2. Перейдите на вкладу монтажных областей.
    3. Задайте размеры, например, 128х128 пикселей (это будет viewBox)
    4. Задайте смещение по горизонтали на половину ширины (64пикс), по вертикали наполовину высоты отрицательно (-64пикс)
    5. Перейдите на вкладку со слоями
    6. Выделите всю иллюстрацию.
    7. В верхней панели задайте положение по X = 64 (половина ширины), по Y = 64 (половина высоты)
    8. Там же включите сохранение пропорций и выставьте размеры. Если картинка квадратная, то одинаковые значения ширины и высоты по размеру монтажной области (128пикс). Если картинка прямоугольная, то задаем размер равный монтажной области только по большей стороне, меньшая скорректируется благодаря сохранению пропорций.
    9. Сохраните в формате SVG.

    Теперь можете задавать для изображения любые размеры в стилях — картинка будет по центру вьюбокса.
    Ответ написан
    Комментировать
    Комментировать

  • Как перекрасить иконку через svg > use?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    Иконка хреновая.
    Ее стоило обработать в люстре, это занимает пару минут.



    код иконки
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
    <path d="M248.4,0c4.9,0,9.8,0,14.8,0c0.9,0.1,1.8,0.4,2.7,0.4c15.5,0.4,30.7,2.5,45.8,5.8c29.2,6.5,56.5,17.8,81.8,33.9
		c0.5,0.3,1.1,0.6,1.7,0.9c4.7-4.7,9.4-9.4,14-14c12.3-12.3,31.2-12.4,43.5-0.2c11,10.8,21.9,21.7,32.7,32.7
		c7.9,8,10.4,17.6,8.1,28.5c-1.2,5.7-4,10.6-8.1,14.6c-3,3-7.4,3.7-11.2,1.9c-3.7-1.7-5.9-5.4-5.7-9.5c0.2-2.7,1.4-4.8,3.1-6.8
		c3.9-4.4,3.9-10.5-0.2-14.7c-10.9-11-21.9-22-32.9-32.9c-4.4-4.4-10.7-4.2-15.2,0.2c-3.6,3.5-7.1,7.1-10.6,10.6
		c-0.4,0.4-0.6,0.9-0.9,1.2c52,41.3,85.1,94,96.3,159.5c11.2,65.4-1.5,126.4-36.9,182.7c0.5,0.5,0.9,1,1.3,1.5
		c4.2,4.2,8.3,8.4,12.5,12.6c12.4,12.4,12.4,31.3,0.1,43.6c-10.8,10.8-21.5,21.6-32.4,32.3c-7.9,7.8-17.4,10.6-28.2,8.5
		c-5.9-1.1-10.9-3.9-15.1-8.2c-5.4-5.6-2.9-14.7,4.6-16.6c3.6-0.9,6.7,0.1,9.5,2.6c4.8,4.3,10.7,4.1,15.2-0.3
		c10.8-10.8,21.6-21.6,32.3-32.4c0.9-0.9,1.6-1.9,2.2-2.9c2.1-4.1,1.5-8.8-1.9-12.3c-3.6-3.8-7.4-7.4-11.1-11.2
		c-0.2-0.2-0.5-0.4-0.8-0.6c-41.2,52-94,85.1-159.6,96.4c-65.5,11.3-126.6-1.6-182.9-37c-0.6,0.5-1.1,1-1.7,1.5
		c-4.1,4.1-8.1,8.1-12.2,12.2c-12.7,12.5-31.4,12.5-44-0.1c-10.6-10.6-21.2-21.2-31.8-31.8c-7.3-7.3-10.4-16.1-9.1-26.4
		c0.9-6.7,3.8-12.5,8.7-17.3c2.8-2.8,6.2-3.5,10-2.3c3.6,1.2,5.9,3.8,6.6,7.6c0.7,3.4-0.3,6.3-2.7,8.8c-2.1,2.3-3.2,4.9-3.1,8
		c0.1,3.2,1.6,5.6,3.7,7.8c10.5,10.5,21,21,31.5,31.5c0.3,0.3,0.7,0.7,1.1,1c4.3,3.7,10.2,3.8,14.3-0.1c4.1-3.8,7.9-7.9,11.8-11.8
		c0.1-0.1,0.1-0.3,0.1-0.4c-51.9-41.3-85-94.1-96.3-159.6c-11.2-65.5,1.8-126.4,37-182.7c-0.6-0.6-1.1-1.2-1.7-1.8
		c-4.1-4.1-8.1-8.1-12.2-12.2c-12.4-12.5-12.4-31.4,0-43.8C37.7,48.5,48.4,37.9,59,27.3c5.2-5.3,11.4-8.5,18.8-9.3
		c9.8-1,18.3,2,25.2,9.1c2.1,2.2,2.9,4.9,2.5,7.9c-0.5,3.8-2.6,6.5-6.2,7.9c-3.7,1.4-7.1,0.8-10.1-1.7c-0.2-0.2-0.4-0.3-0.6-0.5
		c-4.9-4.3-10.7-4.2-15.4,0.4C62.6,51.7,52.1,62.4,41.3,72.8c-4.5,4.4-5,11.7,0,16.4c3.4,3.2,6.6,6.6,9.9,9.9c0.4,0.4,1,0.8,1.4,1.2
		c0.2-0.2,0.4-0.3,0.5-0.4c0.6-0.8,1.2-1.5,1.8-2.3c29.5-37.1,66.4-64.2,110.7-81.1c25.9-9.9,52.8-15.3,80.6-16.1
		C247,0.4,247.7,0.1,248.4,0z M113.5,256.1c-0.1,78.3,63.5,141.9,141.3,142.5c79.1,0.7,143.9-63.5,143.8-142.5
		c0-78.8-64.1-142.9-142.7-142.7C177,113.7,113.5,177.3,113.5,256.1z M309.9,486c42.8-10.3,79.9-30.6,111.2-61.2
		c32.7-32,54.2-70.3,65-115.2c-1.3,0-2.2,0-3,0c-18.1,0-36.2,0-54.4,0c-1,0-2,0-2.9-0.1c-4.7-0.4-8.3-4-8.9-8.8
		c-0.5-4.4,2.3-9,6.6-10.4c1.5-0.5,3.1-0.6,4.6-0.6c19.5,0,39,0,58.6,0c1,0,1.9,0,3.1,0c3.2-22.7,3.2-45.2,0-67.6
		c-5.6-0.6-72.7-0.3-74.6,0.3c7.6,39.8,2.4,77.7-17.6,113.1c-20,35.4-49.6,59.7-87.7,73.7C309.9,434.8,309.9,460.2,309.9,486z
		 M289.7,415c-39.9,7.6-77.8,2.5-113.2-17.5c-35.5-20-59.8-49.6-74-87.9c-0.8,0-1.7,0-2.5,0c-24.5,0.1-49,0.1-73.5,0.2
		c-0.1,0-0.1,0.1-0.2,0.1c-0.1,0.1-0.1,0.1-0.2,0.4c7.6,32.1,21.4,61.5,41.4,87.9c23.2,30.7,52.3,54.3,87,71
		c15.2,7.3,31,12.9,47.8,16.7c0-1.4,0-2.3,0-3.3c0-18.1,0-36.2,0-54.4c0-0.7,0-1.5,0-2.2c0.4-5.1,4.4-9.1,9.4-9.3
		c5.2-0.2,9.5,3.4,10.2,8.6c0.2,1.2,0.2,2.5,0.2,3.7c0,19.2,0,38.4,0,57.5c0,1,0,1.9,0,3.1c22.7,3.2,45.1,3.2,67.5,0
		C289.7,464.7,289.7,439.9,289.7,415z M202.2,26.3c-86.5,19-157.3,90.8-175.9,176c1,0,2,0,3,0c18.1,0,36.2,0,54.4,0
		c0.8,0,1.6,0,2.5,0c5,0.4,8.7,4.1,9.3,8.9c0.5,4.5-2.3,8.9-6.7,10.3c-1.4,0.4-2.9,0.5-4.4,0.5c-19.7,0-39.4,0-59,0
		c-0.9,0-1.9,0.1-2.8,0.1c-3.3,16.1-3.2,58.8,0.2,67.5c24.7,0,49.5,0,74.4,0c-7.7-39.9-2.5-77.8,17.5-113.2
		c20-35.5,49.6-59.8,87.7-73.8C202.2,77.1,202.2,51.7,202.2,26.3z M222.3,97c39.9-7.7,77.8-2.5,113.2,17.5
		c35.4,20,59.7,49.5,73.8,87.5c3.5,0.5,74.7,0.3,76.4-0.2c-19.2-86.5-90.9-157-176-175.6c0,1,0,2,0,2.9c0,18.1,0,36.2,0,54.4
		c0,1,0,2-0.1,2.9c-0.5,4.9-4.4,8.6-9.4,8.8c-4.7,0.2-9-3-10-7.7c-0.3-1.3-0.3-2.6-0.3-3.9c0-19.5,0-39,0-58.5
		c0-0.9-0.1-1.9-0.1-2.8c-19.4-3.2-58-3-67.4,0.2C222.3,47.3,222.3,72.1,222.3,97z"/>
</svg>
    Ответ написан
    Комментировать
    Комментировать

  • Как нарисовать букву F?

    delphinpro
    @delphinpro
    frontend developer
    Берем и рисуем

    Ответ написан
    8 комментариев
    8 комментариев

  • Как правильно собрать спрайты svg в gulp?

    delphinpro
    @delphinpro Куратор тега Gulp.js
    frontend developer
    Многоцветные, как правило, не нуждаются в изменении цветов через css. Но иногда бывает.

    Я в своих иконках использую только заливку (без обводки). Это немного упрощает управление.
    Удаляю атрибуты заливки только черным цветом
    $('[fill="#000"]').removeAttr('fill');
$('[fill="#000000"]').removeAttr('fill');

    Черный - это дефолтный цвет и он не нужен, только мешает переопределению в css.
    Всё, что не черное — цветное, и попадает в спрайт как есть.
    Базовый стиль для заливки иконок
    fill: currentColor
    думаю, понимаете, в чем сила.

    Особые иконки, в том числе многоцветные, требующие нестандартного поведения или управления цветом, правятся вручную — элементы группируются и им назначаются отдельные классы, с помощью которых происходит переопределение свойств в css.
    Ответ написан
    3 комментария
    3 комментария

  • Как решить проблему с отрицательными значениями viewBox у svg?

    delphinpro
    @delphinpro Куратор тега JavaScript
    frontend developer
    Я всегда svg иконки предварительно подготавливаю в люстре — привожу к единому размеру (viewBox), обычно 128 или 256 и выравниваю иконку внутри области, а также по дробным пикселям. Потом сохраняю в svg, которые прекрасно и без глюков хаваются галпом.
    Ответ написан
    Комментировать
    Комментировать

  • Как сделать текст из маленьких SVG фигур?

    delphinpro
    @delphinpro
    frontend developer
    В любом векторном редакторе делаете буквы, потом пилите анимашку на css/js
    Ответ написан
    3 комментария
    3 комментария

  • Как добавить svg в уже созданный иконочный шрифт icomoon?

    delphinpro
    @delphinpro
    frontend developer
    https://icomoon.io/app/#

    Вы можете собрать свой набор, в том числе загрузить собственные svg иконки
    Ответ написан
    Комментировать
    Комментировать

  • Как экспортировать шейпы из фотошопа в вектор (svg или illustrator)?

    delphinpro
    @delphinpro Автор вопроса
    frontend developer
    Для себя нашел способ, неудобный, но работает.

    В фотошопе активировать инструмент "Перо"
    Выделить все слои с контурами
    Скопировать в буфер обмена
    Вставить в новый документ люстры как составной контур
    Тут придется заново выставить толщину линий и способ из соединения (через буфер эти параметры не переносятся или я что-то делаю не так).
    Далее экспорт в svg из люстры.
    Ответ написан
    Комментировать
    Комментировать

  • Что не так с этим SVG-файлом?

    delphinpro
    @delphinpro
    frontend developer
    Нормально отображается.

    Могу немного пофантазировать - у вас стоит адблок, а имя файла очень тянет на "рекламное".
    Ответ написан
    2 комментария
    2 комментария