Как формируется абракадабра для svg?

Question

[an]

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

<path d="m19.915 13.028c-.388-.49-.277-.708 0-1.146.005-.005 3.208-4.431 3.538-5.932l.002-.001c.164-.547 0-.949-.793-.949h-2.624c-.668 0-.976.345-1.141.731 0 0-1.336 3.198-3.226 5.271-.61.599-.892.791-1.225.791-.164 0-.419-.192-.419-.739v-5.105c0-.656-.187-.949-.74-.949h-4.126c-.419 
      0-.668.306-.668.591 0 .622.945.765 1.043 2.515v3.797c0 .832-.151.985-.486.985-.892 
      0-3.057-3.211-4.34-6.886-.259-.713-.512-1.001-1.185-1.001h-2.625c-.749 0-.9.345-.9.731 
      0 .682.892 4.073 4.148 8.553 2.17 3.058 5.226 4.715 8.006 4.715 1.671 0 1.875-.368 1.875-1.001 
      0-2.922-.151-3.198.686-3.198.388 0 1.056.192 2.616 1.667 1.783 1.749 2.076 2.532 3.074 
      2.532h2.624c.748 0 1.127-.368.909-1.094-.499-1.527-3.871-4.668-4.023-4.878z" />

т.к пути к картинке не прописано
а эти хераборы как формируются собственно и чем?

Answer 1

[Александр]

Векторным редактором, например, Adobe Illustator, Ink, Figma. Можете в Figma нарисовать что надо и экспортировать в SVG.
На примере у Вас обычный путь, залить который можете атрибутом fill и обвести атрибутом stroke как в самой SVG, так и через, например, CSS.

Comments

[an]

так а как этот путь сделать не пойму
с фигмы экспортирую и что дальше?

[Александр]

an, Как SVG вставить на страницу не знаете? Почитайте: https://developer.mozilla.org/ru/docs/Web/SVG/Tuto....
Если надо вставить средствами CSS, то при помощи background-image, но ничего менять не сможете. Вот инструмент для подготовки SVG к использованию в CSS: https://yoksel.github.io/url-encoder/.
Если не можете понять, какая команда за что отвечает, то вот визуализатор: https://yqnn.github.io/svg-path-editor/.

[an]

Александр, вставить как я знаю
где брать этот путь path ? чем его формировать?

[Александр]

an, Зачем Вам его вообще формировать, он уже есть. Какую задачу Вы хотите решить? Научится самому, руками, строить сложные пути для фигур?

[an]

Александр, где он есть?
то ли лыжи не едут то ли я ...
куда прописывается путь к картинке?
на примерах я вижу вот такое

<svg class="youtube-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
   <path d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"></path>
</svg>

куда мне тут воткнуть путь к картинке?
и нафига вот эта абракадабра в теге path ?

[Александр]

an,

абракадабра в теге path

читайте статью из ответа.
Варианты вставки и использования SVG на странице: https://yoksel.github.io/svg-icons/. Обратите внимание на Use и демку в статье.

[Кирилл Никитин]

an, вы кажется просто не понимаете что такое вектор. Вот эта абракадабра это и есть картинка, вернее координаты по которым браузер её отрисовывает каждый раз. В отличии от растра (jpg, png итд), которые уже сформированы заранее.

Answer 2

[VoidVolker]

откуда берутся эти аттрибуты

Дык в спеках же есть все: https://www.w3.org/TR/SVG/paths.html

The d property is used to specify the shape of a ‘path’ element.

Comments

[an]

да я это понял что в path прорисовываются параметры
как мне мою картинку и чем прорисовать? это я не пойму
что бы вставить ее через <svg
а не через img или background

[an]

вот мне нужно вставить картинку из папки ./img/logo.svg
как мне правильно через тег svg ее вставить
просто я не пойму хоть убейте
где мне этот path формировать

[Александр]

an, Инлайном вставляете её. Никаким ни path, ни svg. Прямо из файла содержимое вставляете, если у Вас только HTML и ничего больше.

[Кирилл Никитин]

an, в тег svg можно вставить содержимое файла svg, а не сам файл. Файл вставляется как обычно в тег img, это контейнер для вектора. А если вы хотите вставить в тег svg инлайном, то просто откройте своё logo.svg блокнотом или другим текстовым редактором и забирайте ту самую свою абракадабру.

[an]

Кирилл Никитин, вот что я хотел понять. Спасибо

Answer 3

[Александр]

Это набор команнд отрисовки линии. Можно по идее и вручную вбивать что-то простое. А стилизуется он также, просто у элементов SVG стили по другому называются fill, stroke, stroke-width.
И <path> работать будет в теге <svg>, хотя стиль может быть задан не обязательно в нем. Для экономии не пишут иногда лишние теги - но браузеру они нужны. Тег <svg> - может быль в любом месте кода как и <img> разница в том что данные не в файле а ввиде примитивов графики внутри этого тега.
Если картинка отдельным файлом - то в любое место где ее можно обработать, img , background, iframe, ...

Comments

[Александр]

не дает анонимно сохранить, поэтому скрин.