Ответы пользователя по тегу SVG
  • Где можно взять SVG карты с регионами/областями стран для инфографики?

    melpnz
    @melpnz
    UX/UI дизайнер
    Думаю просто скачивают карту в SVG и потом уже дорабатывают под свои нужды.
    Попробуйте, возможно вам такой вариант подойдёт из Figma Community - https://www.figma.com/community/file/1145619190408...
    Ответ написан
    Комментировать
  • Как конвертировать картинку файл в svg и вывести ее на странице?

    melpnz
    @melpnz
    UX/UI дизайнер
    В данном случае ничего не остается, только воспользоваться трассировкой в каком-нить инструменте, например Illustrator.

    Вот результат таким манипуляций:
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 344.4 13.89">
      <path fill="#fff" d="M344.4 4.08c-1.02-.12-2.04-.19-3.05-.35-2.94-.48-5.87-1.01-8.81-1.49-.54-.09-1.19-.2-1.65.01-2.13.94-4.22.29-6.32-.02-.58-.09-.99-.14-1.06.66-.17 2.08-1.89 3.26-3.98 2.82-2.82-.59-5.63-1.33-8.48-1.67-2.12-.26-4.29.01-6.45.03-1.68.01-3.35.07-5.03-.01-.64-.03-1.36-.25-1.87-.63-1.6-1.17-3.29-1.82-5.33-1.75-.97.04-2.02-.36-2.92-.8-1.98-.96-3.42-1.21-4.85 1.67-.25.5-1 .87-1.59 1.04-1.37.41-2.79.61-4.17.98-2.51.67-4.71-.35-6.87-1.3-.83-.36-1.43-.21-2.1.1-5.03 2.34-10.29 3.12-15.78 2.44-.36-.04-.74.02-1.07-.09-1.55-.51-2.4-.04-3.34 1.4-.67 1.01-2.29 1.72-3.58 1.91-2.07.3-4.22.1-6.33.03-1.18-.04-2.36-.33-3.54-.39-.51-.03-1.05.24-1.56.38-.33.09-.65.21-.98.31-.48.16-1.09.18-1.43.49-1.83 1.67-4.02 1.25-6.12 1.04-1.44-.14-2.84-.7-4.27-1.01-.69-.15-1.43-.12-2.13-.22-4.14-.6-8.25.28-12.38.3-3.03.02-6.06-.16-9.09-.19-.46 0-.93.31-1.39.49-.52.21-1.05.66-1.56.63-3.01-.17-6-.45-9.01-.7-.16-.01-.32-.12-.46-.1-3.91.57-7.82 1.13-11.72 1.77-.49.08-1.01.5-1.36.9-.67.77-1.47.92-2.44.93-3.62.02-7.24.29-10.85.15-3.32-.13-6.68-.42-9.93-1.09-2.03-.42-3.95-1.41-6.12-1.27a.655.655 0 0 1-.45-.14c-1.84-1.59-4.12-.74-6.18-1.13-.26-.05-.58 0-.82.1-2.09.93-4.14.37-6.16-.21-3.02-.88-6-1.95-9.04-2.77-2.16-.59-4.4-.86-6.59-1.36-.58-.13-1.06-.74-1.64-.83-.96-.15-1.96-.1-2.94-.04-.52.03-1.03.38-1.55.39-2.71.04-5.43.02-8.14.01-3.14 0-6.06.79-8.79 2.33-1.71.96-3.49.96-5.33.46-.57-.16-1.2-.4-1.74-.3-2.44.46-4.73-.11-7.01-.83-1.64-.51-3.24-.76-5.01-.55-1.37.19-2.84-.41-4.28-.6-.63-.08-1.33-.11-1.93.05-2.07.58-3.96.6-5.82-.77-.57-.42-1.71-.31-2.52-.13-1.49.33-2.79-.11-4.22-.38-2.78-.52-5.6-1.36-8.53-.11-1.1.47-2.57.01-3.88.02-.39 0-1.03.09-1.11.3-.43 1.21-1.36.82-2.1.67-1.46-.31-2.88-.81-4.33-1.16-.93-.22-1.89-.31-2.84-.41-1.19-.14-2.21.18-3.24.86-.8.54-1.84.92-2.8 1.01-2.28.21-4.58.34-6.86.24-1.73-.08-3.41-.48-4.97-1.51-1.08-.71-2.49-1.14-3.79-1.24-.85-.07-1.8.62-2.66 1.07-1.94 1-3.99 1.55-6.16 1.72V0h344.4v4.08z"/>
    </svg>
    Ответ написан
    Комментировать
  • Как вытащить из свг cкругленный крестик?

    melpnz
    @melpnz
    UX/UI дизайнер
    Так просто - никак. Только через графические проги.
    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
    	<path fill="#002638" d="M11.9288 10.6153C11.878 10.4935 11.8036 10.3829 11.7099 10.2899L10.4099 8.99994L11.7099 7.70994C11.8982 7.52164 12.004 7.26624 12.004 6.99994C12.004 6.73364 11.8982 6.47824 11.7099 6.28994C11.5216 6.10164 11.2662 5.99585 10.9999 5.99585C10.7336 5.99585 10.4782 6.10164 10.2899 6.28994L8.99994 7.58994L7.70994 6.28994C7.52164 6.10164 7.26624 5.99585 6.99994 5.99585C6.73364 5.99585 6.47824 6.10164 6.28994 6.28994C6.10164 6.47824 5.99585 6.73364 5.99585 6.99994C5.99585 7.26624 6.10164 7.52164 6.28994 7.70994L7.58994 8.99994L6.28994 10.2899C6.19621 10.3829 6.12182 10.4935 6.07105 10.6153C6.02028 10.7372 5.99414 10.8679 5.99414 10.9999C5.99414 11.1319 6.02028 11.2626 6.07105 11.3845C6.12182 11.5063 6.19621 11.6169 6.28994 11.7099C6.3829 11.8036 6.4935 11.878 6.61536 11.9288C6.73722 11.9796 6.86793 12.0057 6.99994 12.0057C7.13195 12.0057 7.26266 11.9796 7.38452 11.9288C7.50638 11.878 7.61698 11.8036 7.70994 11.7099L8.99994 10.4099L10.2899 11.7099C10.3829 11.8036 10.4935 11.878 10.6153 11.9288C10.7372 11.9796 10.8679 12.0057 10.9999 12.0057C11.1319 12.0057 11.2626 11.9796 11.3845 11.9288C11.5063 11.878 11.6169 11.8036 11.7099 11.7099C11.8036 11.6169 11.878 11.5063 11.9288 11.3845C11.9796 11.2626 12.0057 11.1319 12.0057 10.9999C12.0057 10.8679 11.9796 10.7372 11.9288 10.6153Z"/>
    </svg>
    Ответ написан
    Комментировать
  • Как разукрасить фон снаружи от path?

    melpnz
    @melpnz
    UX/UI дизайнер
    Никак. Либо действительно через маски делать, либо создать еще один слой нужного цвета с вырезанными звёздами. Потому что, тут работа со слоями и если вы хотите, чтобы звёзды оставались прозрачными - значит под ними не должно быть какого-то закрашенного слоя. Вот например добавил белый слой с вырезанными из него звёздами:

    <svg width="68" height="12" viewBox="0 0 68 12" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path fill-rule="evenodd" clip-rule="evenodd" d="M68 0H0V12H68V0ZM7.545 4.13L6 1L4.455 4.13L1 4.635L3.5 7.07L2.91 10.51L6 8.885L9.09 10.51L8.5 7.07L11 4.635L7.545 4.13ZM21.545 4.13L20 1L18.455 4.13L15 4.635L17.5 7.07L16.91 10.51L20 8.885L23.09 10.51L22.5 7.07L25 4.635L21.545 4.13ZM34 1L35.545 4.13L39 4.635L36.5 7.07L37.09 10.51L34 8.885L30.91 10.51L31.5 7.07L29 4.635L32.455 4.13L34 1ZM49.545 4.13L48 1L46.455 4.13L43 4.635L45.5 7.07L44.91 10.51L48 8.885L51.09 10.51L50.5 7.07L53 4.635L49.545 4.13ZM62 1L63.545 4.13L67 4.635L64.5 7.07L65.09 10.51L62 8.885L58.91 10.51L59.5 7.07L57 4.635L60.455 4.13L62 1Z" fill="#5CC172"/>
    <path d="M6 1L7.545 4.13L11 4.635L8.5 7.07L9.09 10.51L6 8.885L2.91 10.51L3.5 7.07L1 4.635L4.455 4.13L6 1Z" stroke="#F16617" stroke-linecap="round" stroke-linejoin="round"/>
    <path d="M20 1L21.545 4.13L25 4.635L22.5 7.07L23.09 10.51L20 8.885L16.91 10.51L17.5 7.07L15 4.635L18.455 4.13L20 1Z" stroke="#F16617" stroke-linecap="round" stroke-linejoin="round"/>
    <path d="M34 1L35.545 4.13L39 4.635L36.5 7.07L37.09 10.51L34 8.885L30.91 10.51L31.5 7.07L29 4.635L32.455 4.13L34 1Z" stroke="#F16617" stroke-linecap="round" stroke-linejoin="round"/>
    <path d="M48 1L49.545 4.13L53 4.635L50.5 7.07L51.09 10.51L48 8.885L44.91 10.51L45.5 7.07L43 4.635L46.455 4.13L48 1Z" stroke="#F16617" stroke-linecap="round" stroke-linejoin="round"/>
    <path d="M62 1L63.545 4.13L67 4.635L64.5 7.07L65.09 10.51L62 8.885L58.91 10.51L59.5 7.07L57 4.635L60.455 4.13L62 1Z" stroke="#F16617" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
    Ответ написан
    3 комментария
  • Adobe illustrator и экспорт картинок в SVG с пробелами при просмотре в браузере, как решить?

    melpnz
    @melpnz Куратор тега Adobe Illustrator
    UX/UI дизайнер
    Частая проблема. Я её решаю обычно таким путём:
    • Все объекты одного цвета склеиваю в один объёкт.
    • Если объекты разного цвета, то работаю со слоями: т.е. объект который лежит под другим - делаю большего размера, чтобы он заходил под линию стыка.
    Ответ написан
    Комментировать
  • Всем привет. кто знает как сделать градиент как у этого шарика в svg?

    melpnz
    @melpnz
    UX/UI дизайнер
    через радиальный градиент

    <svg width="147" height="147" viewBox="0 0 147 147" fill="none" xmlns="http://www.w3.org/2000/svg">
    <circle cx="73.5" cy="73.5" r="73.5" fill="url(#paint0_radial)"/>
    <radialGradient id="paint0_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(55.5 53.5) rotate(56.0745) scale(101.234)">
    <stop stop-color="#835AF5"/>
    <stop offset="1" stop-color="#552DC1"/>
    </radialGradient>
    </svg>
    Ответ написан
    Комментировать
  • Как сделать такой градиент у path (SVG)?

    melpnz
    @melpnz
    UX/UI дизайнер
    Не очень понятно какой такой?
    Самое просто разбить на 2 path и у каждого сделать линейный градиент. Получится примерно так:

    5fde08eb3571d145502895.jpeg

    <svg width="438" height="213" fill="none" xmlns="http://www.w3.org/2000/svg">
    
      <path d="M.0078125 213C189.608 164.6 350.341 51.1667 407.008.5l30.5 10C397 41 200.5 176 .0078125 213z" fill="url(#paint0_linear)"/>
        <linearGradient id="paint0_linear" x1="9.7e-7" y1="213" x2="438" y2="12" gradientUnits="userSpaceOnUse">
          <stop stop-color="#2ACD66"/>
          <stop offset="1" stop-color="#2ACD66" stop-opacity="0"/>
        </linearGradient>  
      
      <path d="M.0078125 213C104.5 207.5 382 90 437.508 37V10.5C397 41 200.5 176 .0078125 213z" fill="url(#paint1_linear)"/>
        <linearGradient id="paint1_linear" x1="9.7e-7" y1="213" x2="430.422" y2="5.72326" gradientUnits="userSpaceOnUse">
          <stop stop-color="#EE814A"/>
          <stop offset="1" stop-color="#EE814A" stop-opacity="0"/>
        </linearGradient>
    
    </svg>
    Ответ написан
    Комментировать
  • Почему при сохранении SVG в figma, у некоторых иконок она заменяет stroke на fill и как это решить?

    melpnz
    @melpnz Куратор тега Figma
    UX/UI дизайнер
    Как вариант, есть плагины для экспорта свг с чисткой кода. Попробуйте ими воспользоваться, возможно они правильно экспортируют
    Ответ написан
    Комментировать
  • Как нарисовать данный элемент?

    melpnz
    @melpnz
    UX/UI дизайнер
    В целом, в любом векторном редакторе - Illustrator, Figma.

    Вот вам SVG, если не получится самостоятельно нарисовать:

    Через обводку:
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250.5 280.9">
    <path fill="none" stroke="#000" stroke-width="6" stroke-miterlimit="10" d="M247.5 116.7C242.4 53.9 189.4 4.5 125.3 4.5c-29.2 0-56 10.2-77 27.3V3H3v123.8C3 194.3 57.7 249 125.3 249c29.2 0 56-10.2 77-27.3v56.2c25-.1 45.3-20.5 45.3-45.5V116.7h-.1zm-122.2 83.4c-40.5 0-73.4-32.9-73.4-73.4s32.9-73.4 73.4-73.4 73.4 32.9 73.4 73.4-32.9 73.4-73.4 73.4z"/>
    </svg>


    Через заливку:
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250.5 280.9">
    <path fill="#000" d="M125.3 50.4c-42.1 0-76.4 34.3-76.4 76.4s34.3 76.4 76.4 76.4 76.4-34.3 76.4-76.4-34.3-76.4-76.4-76.4zm0 146.7c-38.8 0-70.4-31.6-70.4-70.4s31.6-70.4 70.4-70.4 70.4 31.6 70.4 70.4-31.6 70.4-70.4 70.4z"/>
    <path fill="#000" d="M250.5 116.5c-2.5-31.2-16.7-60.2-39.9-81.7C187.3 13.3 157 1.4 125.3 1.4c-26.6 0-52.6 8.6-74 24.2V0H0v126.8C0 195.8 56.2 252 125.3 252c26.6 0 52.6-8.6 74-24.2v53.1h3c26.6-.2 48.2-21.9 48.2-48.5V116.5zm-6 115.9c0 22.3-17.3 40.7-39.3 42.4v-59.4l-4.9 4c-21.2 17.2-47.8 26.6-75.1 26.6C59.5 246 6 192.5 6 126.8V6h39.3v32.1l4.9-4C71.3 17 98 7.5 125.3 7.5c61.9 0 114.2 48 119.3 109.4v115.5z"/>
    </svg>
    Ответ написан
    Комментировать
  • Иконка на пол экрана в момент загрузки сайта?

    melpnz
    @melpnz
    UX/UI дизайнер
    попробуйте вместо viewbox у svg воспользоваться wight и height.
    Ответ написан
    Комментировать
  • Как реализовать такие фигуры на SVG?

    melpnz
    @melpnz
    UX/UI дизайнер
    Вот ваши фигуры:

    <svg width="496" height="325" viewBox="0 0 496 325" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path style="stroke-dasharray: 8 4 ; stroke: black; stroke-width: 2px;" d="M483 64.6C487.3 63.4 491.6 62.4 495.9 61.6C484.6 57.7 471.5 55.4 457.6 55.4C432.4 55.4 410.1 62.7 396.1 73.9C382.7 64.2 367 57.3 350 53.9C335.7 34.4 301.2 20.6 260.9 20.6C244.5 20.6 229.1 22.9 215.6 26.9C204 19.6 190.7 13.4 175.8 8.40001C102.5 -16.1 26.1 14.8 4.89999 77.7C-16.3 140.5 31 256.6 158.7 283.8C180.6 308.7 216.4 325 256.8 325C308.6 325 352.7 298.3 369.9 260.9C411.8 244.6 441.3 205.7 441.3 160.4C441.3 137.6 433.9 116.5 421.1 99C434.2 84.7 456.3 71.8 483 64.6Z"/>
    </svg>


    <svg width="469" height="318" viewBox="0 0 469 318" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path style="stroke-dasharray: 8 4 ; stroke: black; stroke-width: 2px;" d="M454.1 64.9L27.5 0.299997C10.9 -2.1 -3 12.8 0.6 29.1L56.7 265.9C59.8 279.2 72.4 288 86 286.5L296.9 262.8L390.2 317.3L357.7 255.9L412.2 249.8C420.9 248.8 428 242.6 430.2 234.1L468 85.5C470.3 75.8 463.9 66.4 454.1 64.9Z"/>
    </svg>


    <svg width="497" height="436" viewBox="0 0 497 436" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path style="stroke-dasharray: 8 4 ; stroke: black; stroke-width: 2px;" d="M492.9 238.7L465.8 193.6L478.4 137.3C481.4 124 471.7 111.2 458 110.5L380.4 106.6L394.6 36.8L318.5 71.9L260.3 6.8C252.3 -2.2 238.1 -2.1 230.3 7.1L154.1 95.4L67.5 91.1C60 90.7 53.2 95.6 51.3 102.9L41.7 138.2L20 144.8C7.70002 148.5 0.900013 161.6 4.80001 173.8L19.4 219.7L0.800013 287C-1.89999 296.7 3.5 306.8 13.1 310L52.2 323.1L64.6 362.1C68.4 374 81.2 380.3 92.9 376.2L150 355.9L151.2 356.3L192.9 423.3C199.3 433.6 212.8 436.7 223.1 430.4L275.7 398L385.7 434.8C398.6 439.1 412.5 431.3 415.4 418L442.9 294.9L485.3 268.8C495.8 262.4 499.1 249 492.9 238.7Z"/>
    </svg>


    Соответственно:
    d="..." - координаты точек
    stroke-dasharray: 8 4 - длина пунктира и отступ между
    stroke: black - цвет обводки
    stroke-width: 2px - толщина
    Ответ написан
    2 комментария
  • Как или в чем назначить классы сложному svg изображению для анимации?

    melpnz
    @melpnz
    UX/UI дизайнер
    Самый лучший способ - это:
    1. Сначала открыть SVG каким-нить векторным редактором (например illustrator или figma). Сгруппировать слои по порядку как они у тебя будут анимироваться.
    2. После закинуть куда-нить на codepen или открыть блокнотом и в необходимых местах прописать классы.
    В codepen будет удобнее тем, что если уберешь строку - сразу будешь видеть что с картинки пропало.
    Ответ написан
    Комментировать
  • Как уместить SVG на экране при смене ориентации?

    melpnz
    @melpnz
    UX/UI дизайнер
    Попробуйте заменить viewbox на wight и height и прописать 100%
    Ответ написан
    Комментировать
  • Почему нарисованные svg в Adobe Illustrator выглядят таким образом?

    melpnz
    @melpnz Куратор тега Adobe Illustrator
    UX/UI дизайнер
    Как вариант, после того как отрисуете всё что хотел в Illustrator. Выделите все объекты и нажмите:
    Object - Expand Appearance

    5f7b2d1e3a46a411579463.jpeg

    Тогда он все линии переведет в области, который в svg прописываются как path
    Ответ написан
    2 комментария
  • Как правильно подгонять SVG иконки в Figma?

    melpnz
    @melpnz Куратор тега Figma
    UX/UI дизайнер
    Вообще присоединюсь к предыдущим комментариям, контейнер (viewbox) должен быть у всех одинаковый, иконки в отрисованы в pixelperfect. А между собой ровнять уже визуально, но не вылезая за рамки контейнера.
    Google на тему визуальной отрисовки написал дизайн принципы.
    Ответ написан
    Комментировать
  • Как заменить svg изображение на анимированное при наведении на кнопку/линк?

    melpnz
    @melpnz
    UX/UI дизайнер
    А зачем тебе их подменять? возьми сразу анимированную и в svg-анимацию пропиши, чтоб она стартовала по ховеру. Как-то так примерно - begin="[id-svg].mouseenter"
    Ответ написан
  • Не делается масштаб в svg?

    melpnz
    @melpnz
    UX/UI дизайнер
    Попробуй выпилить viewbox, а width="100%" и height="100%".
    У меня работало
    Ответ написан
    Комментировать