SVG основы

Mar 17, 2019

SVG - масштабируемая векторная графика (Scalable Vector Graphics) является языком разметки расширенным из XML (поэтому все теги в SVG должны быть закрыты) для описания двухмерной векторной графики. SVG по существу является графикой, так же, как XHTML - текстом. SVG является рекомендацией W3C (то есть, стандартом)

Шесть способов подключить svg

<svg> <!--SVG content--> </svg>

Если вы подключаете svg как inline непосредственно в HTML5 коде, то необходимо помнить, что width и height установленные через CSS переопределят атрибуты width и height.

<img src="logo.svg" alt="Company Logo" >
.el {background: url(mySVG.svg);}
<object type="image/svg+xml" data="mySVG.svg"> <!--fallback--> </object>
<embed type="image/svg+xml" src="mySVG.svg" />
<iframe src="mySVG.svg"> <!--fallback--> </iframe>

Базовые фигуры

  • Прямоугольник
    //jsfiddle.net/dnzl/o71rfcp8/embed/html,css,result/dark/
  • Круг
  • Эллипс
    //jsfiddle.net/dnzl/jpkb5rcg/embed/html,css,result/dark/
  • Ломаная линия
  • Многоугольник
    //jsfiddle.net/dnzl/85geu3pm/embed/html,css,result/dark/
    Обратите внимание, что координаты x и y разделяются запятыми, а сами координаты точек пробелами.
    polilyne - незамкнутая линия,
    polygon - линии замыкаются
  • Элемент <text>
    //jsfiddle.net/dnzl/5cjpd0w4/2/embed/html,css,result/dark/

Элемент path

Данные path содержатся в атрибуте d внутри элемента <path>, определяя форму фигуры:

<path d="<конкретные данные path>" />

Рабочая область (viewBox)

Область просмотра устанавливается атрибутами height и width в элементе <svg>. Устанавливая атрибуты width и height, вы определяете размеры по умолчанию в том случае, если вы используете svg как изображение.

Основные характеристики viewBox:

  • Определяет соотношение сторон изображения
  • Определяет, как все длины и координаты, используемые внутри SVG, должны масштабироваться, чтобы поместиться в доступном пронстранстве.
  • Определяет, координаты SVG системы: x=0 и y=0

 

svg не будет масштабироваться адекватно, если вы зададите размеры viewbox, которые не соответствуют aspect ratio (соотношению сторон).

viewBox дает возможность указать, что данный набор графических элементов растягивается, чтобы уместиться в определенный элемент-контейнер. Эти значения включают четыре числа, разделённые запятыми или пробелами: min-x, min-y, width и height

<svg width="115" height="190" viewBox="0 0 115 190">    
<!--<path <контур изображения груши> />-->
</svg>
<svg width="115px" height="190px" viewBox="0 0 65 140">    
<!--<path <контур изображения груши> />-->
</svg>

Заливки (fill)

Атрибут fill раскрашивает внутреннюю часть определённого графического элемента. Заливка может состоять из сплошного цвета, градиента или паттерна. Внутренняя часть фигуры определяется путём анализа всех подконтуров и параметров, описанных в fill-rule. Допустимые значения fill-rule - nonzero, evenodd, inherit.

Градиент

<svg width="405" height="105">    
<defs>        
   <linearGradient id="Gradient1" x1="0" y1="0" x2="100%" y2="0">            
   <stop offset="0%" stop-color="#BBC42A" />            
   <stop offset="100%" stop-color="#ED6E46" />        
</linearGradient>    
</defs>    
<rect x="2" y="2" width="400" height="100" 
   fill= "url(#Gradient1)"          
   stroke="#333333" stroke-width="4px" />
</svg>
//jsfiddle.net/dnzl/yfa846h1/2/embed/html,result/dark/

Обводка

Атрибут stroke определяет закрашивание «границы» конкретных фигур и контуров. У следующего изображения будет сиреневая обводка: stroke = "#765373". (stroke-linecap stroke-linejoin)

Организация документа:

Элемент g

Элемент g является контейнером для группировки связанных графических элементов. Группа становится как бы элементом, которую мы можем использовать в дальнейшем как единое целое с помощью тега use.

Ссылаемся на элемент через xlink:href

//jsfiddle.net/dnzl/bxnguct8/embed/html,result/dark/

Элемент use

Элемент use позволяет повторно использовать элементы в любом месте документа.

Элемент defs

Графика внутри элемента <defs> не отображается на холсте, но на нее можно ссылаться и затем отображать ее посредством xlink:href.

<svg>    
<defs>        
<linearGradient id="Gradient-1">            
<stop offset="0%" stop-color="#bbc42a" />            
<stop offset="100%" stop-color="#765373" />        
</linearGradient>    
</defs>    
<rect x="10" y="10" width="200" height="100"          
fill="url(#Gradient-1)" stroke="#333333" stroke-width="3px" />
</svg>
//jsfiddle.net/dnzl/hg2czb6w/1/embed/html,result/dark/

Элемент symbol

Элемент <symbols> похож на <g>, так как предоставляет возможность группировать элементы, однако, элементы внутри <symbols> не отображаются визуально (как и в <defs>) до тех пор, пока не будут вызваны с помощью элемента <use>.

Также, в отличие от элемента <g>, <symbols> устанавливает свою собственную систему координат, отдельно от области просмотра, в которой он отображается.

Графические приложения, позволяющие создавать SVG-графику

  • Adobe Illustrator
  • CorelDRAW Graphics Suite
  • Mayura Draw
  • Sketsa SVG Editor
  • Inkscape (+) абсолютно бесплатный. Например, можно легко подогнать размеры svg под размеры холста

Основные библиотеки для работы с SVG

  • Vivus - http://maxwellito.github.io/vivus/ (для path, иконок и т.д.)
  • Bonsai - https://bonsaijs.org/ (очень много возможностей)
  • Velocity - http://julian.com/research/velocity/ (для path)
  • Raphaël - http://raphaeljs.com/ (http://g.raphaeljs.com/)
  • Snap - http://snapsvg.io/ (+, очень много возможностей, Snap это jQuery для SVG (также работаем с DOM))
  • Lazy Line Painter - http://lazylinepainter.info/ (для path)
  • SVG.js - http://svgjs.com/ (для path)
  • Walkway - https://github.com/ConnorAtherton/walkway (для path)

Для построения диаграмм - highcharts js

$('#container').highcharts({    
chart: { renderTo: 'charts', defaultSeriesType: 'bar' },    
title: { text: 'Сравнение' },    
xAxis: { categories: ['Ром', 'Коньяк', 'Виски'] },    
yAxis: { title: { text: 'Стопок выпито за вечер' } },    
series: [{ name: 'Женя', data: [1, 0, 4] }, { name: 'Саша', data: [5, 7, 3]}]
});

CANVAS vs SVG

 CANVASSVG
ФорматРастровыйВекторный
МасштабированиеZoomScale
ДоступДоступ к отдельным пикселям (RGBA)Доступ к отдельным элементам (DOM)
Индексируемость и AccessibilityВиден только конечный растр (нельзя выделить фигуры, текст и т.п.) — плохо для AccessibilityМожно посмотреть структуру (например, вытащить весь текст)
СтилизацияВизуальные стили задаются при отрисовке через APIВизуальные стили задаются атрибутами, можно подключать CSS
ПрограммированиеJS API для работы с примитивамиDOM для работы с элементами
ОбновлениеДля обновления — рисование поверх или полная перерисовкаВозможно изменение отдельных элементов
СобытияНет легкого способа для обработки событий мыши. Объекты под курсором надо определять вручную.Легко вешаются события от мыши через DOM, обрабатываются автоматически.
Интеграция кодаКод на JS отдельно от CanvasВнутрь можно включать JS
Лучше подходитРедактирование растровой графики
Наложение эффектов на графику/видео
Генерирование растровой графики (визуализация данных, фракталы, графики функций)
Анализ изображенией
Игровая графика (спрайты, фон и т.п.)
Масштабируемые интерфейсы
Интерактивные интерфейсы
Диаграммы, схемы
Векторное редактирование изображений

Стили

Стилевые свойства SVG - www.w3.org

Стили для svg-элементов можно определять в css-файле, а затем назначать непосредственно svg-элементам:

<rect class="my_class" />

Анимация

  • Стандартная анимация на svg - transition
  • Сложные SVG анимации (GreenSock)
//jsfiddle.net/dnzl/bj89r142/1/embed/html,css,result/dark/

Масштабируем SVG

Как масштабировать SVG, чтобы поместиться внутри определенной ширины (и отрегулировать высоту, соответственно)

SVG с viewbox будет масштабироваться в соответсвии с заданной шириной и высотой. Но что насчет респонсива?

Есть несколько подходов в зависимости от того как вы включаете свой SVG.

1. Использовать автоматическое определение размера, как у изображений

Когда SVG файл имеет viewbox и встроен внутрь img, браузеры будут масштабировать изображение в соответствии с отношением сторон определенным в viewbox.

//jsfiddle.net/dnzl/vxL9qo7a/embed/html,css,result/dark/

2. Использовать фоновое (background) изображение и padding-bottom хак

Автоматическое определение размера, очевидно, для фоновых изображений определенных посредством CSS не работает. Чтобы реализовать это потребуется хак.

Есть некоторые свойства CSS, которые позволяют регулировать высоту на основе ширины. Если вы установите border, padding, или margin на блочном элементе в процентах, то проценты будет вычислены относительно ширины элемента родителя.

//jsfiddle.net/dnzl/j42b6wxf/embed/html,css,result/dark/

Вывод: мы можем контролировать соотношение сторон (aspect ratio).

Решение:

.ratio4-3 {    
width: 100%;    
background-image: url(image-with-4-3-aspect-ratio.svg);    
background-size: cover;    
height: 0;    
padding: 0; /* reset */    
padding-bottom: calc(100% * 3 / 4);
}
//jsfiddle.net/dnzl/cp2Lgnbk/embed/html,css,result/dark/

3. Использовать inline SVG и современные браузеры

Просто установить viewbox на вашем svg и установите width или height в auto.

Смотрите scale svg на css-tricks.com

Ссылки

 

Добавить комментарий