Maximum_Live
@Maximum_Live
учусь php

Как правильно применять svg в html?

Как верно задать вопрос не знаю , с SVG занялся первый раз , к примеру надо создать вот такой объект :
c2b8b8ca50c74780aaa988c6c94ef256.jpg
и я так понимаю что на SVG будет лучше ?
Или к примеру вот это :
<svg width="260" height="140">
    <polyline points="5,135 30,5 55,135 80,5, 105,135 130,5, 155,135 180,5, 205,135 230,5, 255,135"
              fill="none" stroke="orangered" stroke-width="5" />
</svg>

Откуда брать вот эти цифры :
5,135 30,5 55,135 80,5, 105,135 130,5, 155,135 180,5, 205,135 230,5, 255,135
  • Вопрос задан
  • 982 просмотра
Решения вопроса 1
Хороший ответ по изучению svg дал когда-то Nikolay Talanov
Я могу добавить этот сайт svg-art. Сам как-то ковырялся в нём, когда хотел понять как мне нарисовать через svg то, что хочу.
Сначала будет много непонятного, но если начать с элементарных фигур и постоянно практиковаться рисовать кодом, то можно добиться многого.
В вашем примере
<svg width="260" height="140">
    <polyline points="5,135 30,5 55,135 80,5, 105,135 130,5, 155,135 180,5, 205,135 230,5, 255,135"
              fill="none" stroke="orangered" stroke-width="5" />
</svg>

Берется layout размером 260 на 140, мысленно представляете две оси: ось x вправо, ось y вниз и в абсолютах расставляете координаты. Я обычно это делаю на листке в клетку
8085c7f5d60d4b8fa94bba04d078a99e.png
К примеру ваша фигура-стрелка может быть нарисована так (на относительных координатах l) https://jsfiddle.net/fu8nmwje/
<svg width="100" height="30">
    <path d="M0,0 l100,0 l-25,30 l-75,0" fill="#018846"/>
</svg>

Две смежные стрелки https://jsfiddle.net/yurzui/fu8nmwje/1/
<svg width="200" height="30">
    <path d="M0,0 l100,0 l-25,30 l-75,0 M110,0 l75,0 l0,30 l-100,0" fill="#018846" />
</svg>

Обратите внимание, что я переместил курсор для рисования второй фигуры (M110,0)

Или вот человечек чуть посложней
<svg width="240" height="80" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 240 80" >
  <path d="M0,30 h30 m0,-10 l20,50 h30 m10,0 A40,40 30 1 1 150,70 m10,0 h30 l20,-50 m0,10 h30 M100,30 l10,10 m10,-10 l-10,-10 M130,23 A6,6 0 1 1 100,55" stroke-width="4" stroke="#042138" fill="none"></path>
</svg>

https://jsfiddle.net/yq6fbyxn/

Совсем сложные фигуры лучше рисовать в спец. редакторе.
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
Какой объект?

Я рисую svg в Sketch (ничего удобнее не встречал для работы с SVG), но он только для макинтошей.
Цифры понимает только машина.
Ответ написан
weranda
@weranda
Эти цифры формируются редактором. Просмотреть вы их можете в сохраненном файле или самом редакторе.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы