SVG это графический формат как jpg. Но только этот Graphic ещё и Scalabel, да к тому же Vector. SVG файл - это не картинка в том виде, как мы к ним привыкли. Он содержит XML разметку, которая определяет все линии, цвета, слои и прочее. Такой файл мы можем менять вручную в текстовом редакторе или с помощью JavaScript и CSS кода.
SVG — преимущества.
SVG файл не ограничен заранее заданным разрешением потому-что состоит не из пикселей, а из векторных фигур. Благодаря этому можно сколько угодно увеличивать размер svg картинки без потери качества.
SVG файл весит меньше любого другого графического файла, когда речь идёт о элементах интерфейса. Для фотографий лучше по прежнему использовать jpeg. Это происходит потому что для растрового изображения, главным фактором определяющим размер является разрешение. Для svg определяющими факторами являются: количество слоёв, градиенты, маски и эффекты которые должны быть описаны. Поэтому для иконок svg формат подходит как нельзя лучше.
SVG файл можно анимировать с помощью css и js или средствами svg. Мы получаем что-то вроде gif но гораздо меньшего размера. Плюс к этому анимацию можно привязать к действиям пользователя, таким как клик, наведение и прочее. Также svg может изменяться в зависимости от размера экрана, плотности пикселей и других параметров.
Как работает SVG.
SVG это файл с XML разметкой, описывающей то что должно быть изображено. Если вам нужен круг то достаточно указать в файле координаты центра, радиус и цвет. Получив эти данные браузер сам нарисует круг. Мы можем изменить радиус, ширину и цвет линий, размер svg файла не измениться.
Для использования svg на страницах сайта есть несколько вариантов. Можно вставить как обычную картинку используя тег <img> или свойство background-img. Оба этих способа ограничивают в применении анимации.
Как я уже говорил svg это файл с xml разметкой который можно открыть в текстовом редакторе. Если скопировать этот код и вставить его в HTML то картинка будет отображаться так же как если вставлять через <img>. Этот способ позволяет использовать все возможности анимации и манипуляции svg.
Ещё один вариант использовать тег <object>. Также как и предыдущий вариант даёт полную свободу действий без встраивания кода в HTML. Плюс к этому изображение будет кэшироваться брузером.
SVG картинки. Рисуем или скачиваем.
Разжиться svg картинками труда не составит. Например на этом сайте http://www.flaticon.com/. Для тех кто любит всё делать своими руками список программ для работы с векторной графикой
- Adobe Illustrator для Windows
- Sketch для Mac OS
- Inkscape бесплатный редактор для всех операционных систем.
- Онлайн редактор https://svg-edit.github.io/svgedit/releases/svg-edit-2.8.1/svg-editor.html
Перечисленых выше ресурсов должно хватить если нужны просто svg картинки без анимации. Для оживления svg, нужно знать как он устроен. Нарисуем картинку в текстовом редакторе. Прежде чем начать рисовать фигуры указываем что это векторная графика и определяем размер картинки.
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
<!--здесь код картинки-->
</svg>
SVG простые фигуры
Есть несколько базовых фигур. Каждой соответствует свой тег и атрибуты, определяющие как рисовать фигуру. Тег должен быть обязательно закрытым.
Прямоугольник.
<rect width="100" height="50" x="10" y="10" rx="5" ry="15" />
Обязательно должны быть параметры определяющие ширину width и высоту height. Дальше идут координаты X и Y определяющие где будет находиться верхний левый угол прямоугольника. Точка отсчёта находиться в верхнем левом углу изображения. Если координаты не заданы то их значение принимается равным 0. Значение rx и ry указывать не обязательно. Эти значения определяют радиусы закругления углов по осям x и y. Если радиусы по обоим осям одинаковы то можно указать один.
Окружность
<circle cx="100" cy="50" r="50" />
r — радиус окружности. cx и cy — координаты центра окружности.
Эллипс
<ellipse cx="100" cy="50" rx="100" ry="50" />
Отличается от окружности наличием двух радиусов — rx и ry по осям X и Y соответственно.
Полигон
<polygon points="30 10, 170 10, 100 100" />
Один обязательный атрибут points — содержит координаты вершин. Для каждой вершины записывают две координаты разделённых пробелом. Координаты вершин разделяют запятой.
Линия
<line x1="50" y1="10" x2="180" y2="90" stroke-width="5" stroke="red"/>
x1, y1, x2, y2 -координаты начала и конца линии. Storke-width и storke определяют толщину линии и цвет.
Ломаная линия
<polyline points="30 10, 170 10, 150 90, 10 90" stroke-width="5" stroke="red" fill="none"/>
Похожа на полигон. Координаты точек также записываются в атрибут points. Различаются тем, что у полигона последняя точка сама соединяется с первой. Атрибут fill определяет каким цветом будет заполнено пространство между линиями.
Атрибуты stroke и fill
Я уже упоминал об этих атрибутах. Рассмотрим их подробнее. fill — устанавливает цвет заливки, stroke- цвет обводки. Эти атрибуты можно использовать со всеми фигурами перечисленными выше. Для указания цвета прописываем в качестве значения атрибута название(red, green и т.д.) или указываем rgb или hex значения. В общем всё то чем пользуемся в CSS. Кроме этого мы можем задать прозрачность для обводки stroke-opacity и для заливки fill-opacity
<polygon points="30 10, 170 10, 150 90, 10 90" stroke-width="5" stroke="yellow" fill="green" stroke-opacity="0.7" fill-opacity="0.5"/>
В дополнение к свойствам определяющим цвет есть несколько атрибутов для управления способом рисования линии. Атрибут stroke-linecap определяет как рисовать концы линии.У него есть три значения
- but — закрывает линию под прямы углом.
- square — Внешне выглядит как but, но немного растягивает обводку за фактическую длину линии на растояние равное половине ширины обводки
- round — края линии рисуются полуругом. Радиус определяется шириной обводки.
<svg width="200" height="160" xmlns="http://www.w3.org/2000/svg">
<line x1="40" y1="40" x2="160" y2="40" stroke-width="20" stroke="black" stroke-linecap="but"/>
<line x1="40" y1="80" x2="160" y2="80" stroke-width="20" stroke="black" stroke-linecap="square"/>
<line x1="40" y1="120" x2="160" y2="120" stroke-width="20" stroke="black" stroke-linecap="round"/>
</svg>
Чтобы контролировать как соединяются две линии используем stroke-linejoin.
- miter - расширяет линию немного за пределы своей нормальной ширины, чтобы создать квадратный уголок, где используется только один угол
- round — создаёт закруглённый сегмент линии
- bevel — создает угол, чтобы помочь в переходе между двумя сегментами.
<svg width="200" height="250" xmlns="http://www.w3.org/2000/svg">
<polyline points="10 120, 100 20, 190 120" stroke="black" stroke-width="20" stroke-linejoin="miter" fill="none"/>
<polyline points="10 170, 100 70, 190 170" stroke="black" stroke-width="20" stroke-linejoin="round" fill="none"/>
<polyline points="10 230, 100 130, 190 230" stroke="black" stroke-width="20" stroke-linejoin="bevel" fill="none"/>
</svg>
В заключении атрибут, меняющий стандартную линию на пунктирную — stroke-dasharray. Значение атрибута — цифры разделённые запятой. Первая цифра — длина пунктира, вторая — длина пропуска.
<svg width="300" height="100" xmlns="http://www.w3.org/2000/svg">
<line x1="10" y1="40" x2="290" y2="40" stroke-width="4" stroke="black" stroke-dasharray="5,5"/>
<line x1="10" y1="80" x2="290" y2="80" stroke-width="4" stroke="black" stroke-dasharray="5,10,5"/>
</svg>
С первым примером всё понятно. Пунктиры длиной 5 пикселей и расстоянием между ними 5 пикселей. Во втором примере заданы значения 5,10,5. Расчёт происходит так. Сначала пунктир 5px, далее пропуск 10px, далее снова пунктир 5px. После этого нужно опять определить длину пропуска и мы возвращаемся в начало и получаем 5px пропуска, 10px пунктир и так далее.
- Войдите, чтобы оставлять комментарии
Интересно.Хотелось бы
Интересно.Хотелось бы продолжения