Основы svg – Знакомство с SVG-графикой / Habr

Содержание

Карманное руководство по написанию SVG. Введение — CSS-LIVE

Перевод книги Pocket Guide to Writing SVG, c разрешения автора — Джони Трайтел.

Спасибо вам!

Этот раздел я хотела бы целиком посвятить тому, чтобы сказать «Огромное спасибо!»:

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

Введение

Масштабируемая векторная графика (SVG) – язык для описания двумерной графики в формате XML. Эта графика может состоять из путей, изображений и/или текста, который способен масштабироваться и изменять размеры без потери качества изображения.

Под встроенным SVG понимают код, написанный прямо внутри HTML, чтобы сгенерировать в браузере эту графику, о которой эта книга.

У такого использования SVG есть много преимуществ, включая доступ ко всем отдельным частям графики для интерактивности, генерации текста с возможностью поиска, доступ к DOM для прямого редактирования, и улучшение доступности для пользователя.

Начав с базовой структуры и простых фигур, мы перейдем к описанию системы

SVG-координат или «холста», рисованию заливки и/или обводки фигур, трансформациям, а так же использованию и обработке графического текста. Ну и завершим, коснувшись более продвинутых функций, таких как градиенты и паттерны.

Цель этого руководства — быстрое, но основательное введение в построение встроенного SVG, и, хотя оно ни в коей мере не покрывает всех его возможностей, оно должно помочь вам начать. Это руководство предназначено для дизайнеров и разработчиков, желающих добавить SVG в свою работу самым доступным способом.

От мелких подробностей обводки до введения в ручное создание паттернов, это руководство задумано как некий "универсальный справочник" по написанию SVG.

Прежде чем начать

Хотя это «Карманное руководство» предназначено для тех, кто уже немного разбирается в HTML и CSS, есть несколько дополнительных вещей, о которых полезно знать, прежде чем браться за код SVG в вашем любимом браузере. В их числе: какая информация в SVG-фрагменте нужна для правильного отображения, как сделать вашу графику максимально доступной, и знание, как и когда пользоваться векторными графическими редакторами.

Использование SVG

Есть несколько способов включить SVG в ваши проекты: как встроенный, как <img>, фоновое изображение, <object>, или в виде Data URI. Мы же с вами будем использовать именно встроенный SVG, который предполагает написание SVG-кода внутри тела правильно структурированного HTML-документа.

Несмотря на то, что в этой книге мы будет использовать встроенный SVG, бывают случаи, когда другие методы могут быть наиболее подходящими. Например, если вам не нужны в возможностях редактирования самой графики или доступу к её отдельным частям, то использование её в виде <img> может лучше подойти для вашего проекта.

Программы для векторной графики

Векторные графические редакторы могут быть оправданным выбором, когда нужно создавать более сложную графику, которую нерационально писать вручную. Такие программы, как Adobe Illustrator, Inkscape, Sketch, iDraw или WebCode могут оказаться полезными инструментами, которые стоит добавить в вашу

SVG-копилку.

Преимуществом этих инструментов является то, что вы можете экспортировать их SVG-код и встроить его прямо в ваш HTML. Мы коснёмся этого немного позже.

Встроенный SVG в вебе

Для краткости на всём протяжении этой книги SVG DOCTYPE, номер версии xmlns, и xml:space был исключён из всех примеров кода.

Эти атрибуты определяют используемую версию SVG и пространство имён документа. Главное, что здесь надо запомнить — вам, как правило, не придется указывать эти атрибуты, чтобы ваша графика успешно отобразилась в браузере.

Давайте теперь взглянем на эти атрибуты в примере SVG-кода, сгенерированном в Иллюстраторе, чтобы гарантировать, что для вас это не будет неожиданностью, когда вы начнёте работать с SVG.

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"></svg>

В большинстве случаев в DOCTYPE и этих атрибутах внутри элемента <svg> нет необходимости и от них можно избавиться, существенно «почистив» ваш код.

Доступность SVG для пользователей

Использование средств доступности SVG — отличная привычка, которую стоит выработать, но опять же, для краткости, описания и заголовки не будут включены в код на всём протяжении книги.

Как только вы станете более опытными в написании SVG, включение этих элементов сделают вашу графику более доступной для пользователей. Например, содержимое внутри элемента <desc> позволит вам обеспечить подробное описание графики для пользователей скринридеров.

С точки зрения доступности текст в SVG также обеспечивает огромное преимущество перед традиционными растровыми изображениями, поскольку SVG-текст может быть обнаружен и прочтен, и легко меняет размер, подстраиваясь под определённые настройки чтения.

Общие замечания

Еще пара общих замечаний, прежде чем перейти к главному: шрифты, используемые в примерах во всей книге, доступны на Google Fonts. Это будет видно по значениям

font-family, но соответствующий код для link или @import, получаемый с Google Font, здесь не приводится, и вам придется вставить его в документ самостоятельно.

В примерах книги используются исключительно пиксели и проценты в качестве единиц измерения. SVG поддерживает следующие единицы длины:: em, ex, px, pt, pc, cm, mm, in, и проценты.

SVG-код из этой книги можно добавить в любой текстовый редактор, а затем просмотреть в любом браузере с поддержкой встроенного SVG. Хотя в целом браузерная поддержка SVG очень хороша, для более продвинутых функций, например, градиентов, между браузерами могут возникнуть разночтения. Can I Use – прекрасное место для проверки поддержки таких особенностей, но в конечном счёте ничто не сравнится с тем, чему вы научитесь методом проб и ошибок.

Помимо сказанного, вы также можете скопировать код из примеров, вставить его в окошко "HTML" на CodePen и мгновенно увидеть вашу графику на экране. Мне не хватает лестных слов для этого инструмента, так как по сути именно он в первую очередь заставил меня полюбить

SVG. Это мой любимый способ учиться: играя, экспериментируя, иногда даже совершая досадные ошибки.

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

<svg>
    <!--<путь d=<этот путь закомментирован> />-->
</svg>

Публикуется под лицензией Attribution-NonCommercial-ShareAlike 4.0

P.S. Это тоже может быть интересно:

css-live.ru

Учебник по HTML графике - Список SVG элементов

<a>Создает ссылку вокруг SVG элементаxlink:show
xlink:actuate
xlink:href
target
<altGlyph>Предоставляет контроль над символами (глифами), используемыми для отображения специальных символьных данныхx
y
dx
dy
rotate
glyphRef
format
xlink:href
<altGlyphDef>Определяет подстановочный набор символов (глифов)id
<altGlyphItem>Определяет вариантный набор символов (глифов) подстановкиid
<animate>Определяет поведение атрибута элемента во времениattributeName="имя атрибута"
by="относительное смещение"
from="начальное значение"
to="конечное значение"
dur="длительность"
repeatCount="сколько раз применяется анимация"
<animateMotion>Заставляет указанный элемент двигаться по заданной траекторииcalcMode="метод интерполяции. Принимает значение 'discrete', 'linear', 'paced' или 'spline'"
path="траектория движения"
keyPoints="как далеко по траектории движения должен сдвигаться объект за заданный отрезок времени"
rotate="задает трансформацию поворота"
xlink:href="ссылка URI на элемент <path>, который определяет траекторию движения"
<animateTransform>Анимирует атрибут трансформации на заданном элементе. Это позволяет анимации контролировать трансляцию, масштабирование, поворот и/или перекосby="относительное значение сдвига"
from="начальное значение"
to="конечное значение"
type="тип трансформации. Может быть 'translate', 'scale', 'rotate', 'skewX', 'skewY'"
<circle>Определяет кругcx="x-координата центра круга"
cy="y-координата центра круга"
r="радиус круга". Обязательный.
+ презентационные атрибуты:
Color, FillStroke, Graphics
<clipPath>Обрезка состоит в том, чтобы скрыть из вида то, что в обычных условиях прорисовывается. Шаблон, который определяет, что рисовать, а что нет, называется контур обрезкиclip-path="контур обрезки, на который ссылаются, пересекается с ссылающимся контуром обрезки"
clipPathUnits="Может быть 'userSpaceOnUse' или 'objectBoundingBox'. Второе значение делает дочерние элементы частью ограничивающего объект блока, использующего маску (по умолчанию: 'userSpaceOnUse')"
<color-profile>Определяет описание цветового профиля (когда стили документа определяются при помощи CSS)local="уникальный ID сохраненного локально цветового профиля"
name=""
rendering-intent="auto | perceptual | relative-colorimetric | saturation | absolute-colorimetric"
xlink:href="URI на ICC ресурс профиля"
<cursor>Определяет платформо-независимый пользовательский курсорx="x-координата верхнего левого угла курсора (по умолчанию 0)"
y="y-координата верхнего левого угла курсора (по умолчанию 0)"
xlink:href="URI изображения, используемого как курсор"
<defs>Контейнер для элементов, на которые будут ссылаться другие элементы
<desc>Текстовое описание для контейнерных или графических элементов в SVG (пользовательские программы могут выводить данный текст как всплывающую подсказку)
<ellipse>Определяет эллипсcx="x-координата центра эллипса"
cy="y-координата центра эллипса"
rx="длина радиуса по оси x". Обязательный параметр.
ry="длина радиуса по оси y". Обязательный параметр.
+ презентационные атрибуты:
Color, FillStroke, Graphics
<feBlend>Совмещает два объекта в соответствии с заданным режимом смешиванияmode="режим смешивания изображений: normal | multiply | screen | darken | lighten"
in="определяет ввод для заданного примитива фильтра: SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference>"
in2="вводная второго изображения для операции смешивания"
feColorMatrixSVG фильтр. Применяет матричную трансформацию
feComponentTransferSVG фильтр. Выполняет покомпонентную модификацию данных
feCompositeSVG фильтр.
feConvolveMatrixSVG фильтр.
feDiffuseLightingSVG фильтр.
feDisplacementMapSVG фильтр.
feDistantLightSVG фильтр. Определяет источник света
feFloodSVG фильтр.
feFuncASVG фильтр. Подэлемент для feComponentTransfer
feFuncBSVG фильтр. Подэлемент для feComponentTransfer
feFuncGSVG фильтр. Подэлемент для feComponentTransfer
feFuncRSVG фильтр. Подэлемент для feComponentTransfer
feGaussianBlurSVG фильтр. Выполняет размытие изображения по Гауссу
feImageSVG фильтр.
feMergeSVG фильтр. Создает слои изображений друг над другом
feMergeNodeSVG фильтр. Подэлемент для feMerge
feMorphologySVG фильтр. Выполняет "утолщение" (fattening) или "утончение" (thinning) текущего графического объекта
feOffsetSVG фильтр. Сдвигает изображение относительно его текущей позиции
fePointLightSVG фильтр.
feSpecularLightingSVG фильтр.
feSpotLightSVG фильтр.
feTileSVG фильтр.
feTurbulenceSVG фильтр.
filterКонтейнер для фильтров
fontОпределяет шрифт
font-faceОписывает характеристики шрифта
font-face-format
font-face-name
font-face-src
font-face-uri
foreignObject
<g>Группирует элементыid="имя группы"
fill="цвет заливки для группы"
opacity="прозрачность для группы"
+ презентационные атрибуты:
Все
glyphОпределяет графику для заданного символа (глифа)
glyphRefОпределяет допустимый для использования символ (глиф)
hkern
<image>Определяет изображениеx="x-координата верхнего левого угла изображения"
y="y-координата верхнего левого угла изображения"
width="ширина изображения". Обязательный параметр.
height="высота изображения". Обязательный параметр.
xlink:href="путь к изображению". Обязательный параметр.
+ презентационные атрибуты:
Color, Graphics, Images, Viewports
<line>Определяет линиюx1="x начала линии"
y1="y начала линии"
x2="x конца линии"
y2="y конца линии"
+ презентационные атрибуты:
Color, FillStroke, Graphics, Markers
<linearGradient>Определяет линейный градиент. Линейный градиент заполняет объект, используя вектор направления, и может быть горизонтальным, вертикальным или угловымid="уникальный идентификатор. Требуется для обращения к этому шаблону"
gradientUnits="'userSpaceOnUse' или 'objectBoundingBox'. Используйте область видимости или объект, чтобы определить относительную позицию точек вектора. (по умолчанию 'objectBoundingBox')"
gradientTransform="трансформация, применяемая к градиенту"
x1="x начальной точки вектора градиента (число или % - 0% по умолчанию)"
y1="y начальной точки вектора градиента (0% по умолчанию)"
x2="x конечной точки вектора градиента (100% по умолчанию)"
y2="y конечной точки вектора градиента (0% по умолчанию)"
spreadMethod="'pad' или 'reflect' или 'repeat'"
xlink:href="ссылка на другой градиент, чьи атрибуты используются как атрибуты по умолчанию. Работает рекурсивно"
<marker>Маркеры устанавливаются в вершинах прямых и ломаных линий, многоугольников и контуров. Этим элементам можно задавать атрибуты "marker-start", "marker-mid" и "marker-end", которые по умолчанию наследуются, либо установить им значение 'none', либо прописать в них URI определенного маркера. Прежде, чем ссылаться через URI маркера, его нужно определить. Любой тип графической фигуры можно помещать внутри маркера. Маркеры рисуются наверху элемента, к которому они прикрепленыmarkerUnits="'strokeWidth' или 'userSpaceOnUse'. Если используется значение 'strokeWidth', то маркер равен ширине прорисовки. В обратном случае маркер не масштабируется и использует то же поле видимости, что и ссылающийся на него элемент (по умолчанию 'strokeWidth')"
refx="позиция, где маркер присоединяется к вершине (по умолчанию 0)"
refy="позиция, где маркер присоединяется к вершине (по умолчанию 0)"
orient="'auto' или угол, под которым буде показываться маркер. При значении 'auto' угол будет рассчитываться таким образом, чтобы ось x проходила по касательной к вершине фигуры (по умолчанию 0)"
markerWidth="ширина маркера (по умолчанию 3)"
markerHeight="высота маркера (по умолчанию 3)"
viewBox="точки "видимости" в этой SVG области рисования. 4 значения, разделенных пробелом или запятой. (мин x, мин y, ширина, высота)"
+ презентационные атрибуты:
Все
<mask>Наложение маски это комбинирование значений прозрачности и обрезки. Как и с обрезкой, чтобы определять секции маски, можно использовать формы, текст или контур. По умолчанию состояние маски полностью прозрачное, что противоположно проекции обрезки. Графический объект в маске устанавливает, какие части маски будут непрозрачнымиmaskUnits="'userSpaceOnUse' или 'objectBoundingBox'. Устанавливает, будет ли маска считаться относительно всей области видимости или только объекта (по умолчанию 'objectBoundingBox')"
maskContentUnits="Устанавливает, будет ли содержимое маски считаться относительно всей области видимости или только объекта. 'userSpaceOnUse' или 'objectBoundingBox' (по умолчанию 'userSpaceOnUse')"
x="проекция маски (по умолчанию -10%)"
y="проекция маски (по умолчанию -10%)"
width="проекция маски (по умолчанию 120%)"
height="проекция маски (по умолчанию 120%)"
metadataЗадает метаданные
missing-glyph
mpath
<path>Определяет контурd="набор команд, определяющих контур"
pathLength="если задан, контур будет масштабирован таким образом, что вычисленная длина точек контура будет равняться этому значению"
transform="список трансформаций"
+ презентационные атрибуты:
Color, FillStroke, Graphics, Markers
<pattern>Определяет паттерн. Сначала задаются координаты и размер показываемой области видимости. Затем в паттерн добавляются графические фигуры. Когда достигается край области видимости, паттерн повторяетсяid="уникальный идентификатор паттерна." Обязателен.
patternUnits="'userSpaceOnUse' или 'objectBoundingBox'. Задает систему координат паттерна. Первое значение определяет координаты относительно всей области видимости, второе относительно объекта, использующего паттерн."
patternContentUnits="Устанавливает систему координат содержимого паттерна. 'userSpaceOnUse' или 'objectBoundingBox'"
patternTransform="позволяет добавить трансформацию паттерна"
x="положение паттерна относительно верхнего левого угла по горизонтали (по умолчанию 0)"
y="положение паттерна относительно верхнего левого угла по горизонтали (по умолчанию 0)"
width="ширина паттерна (по умолчанию 100%)"
height="высота паттерна (по умолчанию 100%)"
viewBox="указывает "видимую область" в области рисования SVG. 4 значения, разделенные пробелом или запятой. (мин x, мин y, ширина, высота)"
xlink:href="ссылка на другой паттерн, значения атрибутов которого нужно унаследовать. Рекурсивный"
<polygon>Определяет многоугольник - графическую фигуру, у которой есть по меньшей мере три стороны.points="вершины многоугольника. Число вершин должно быть четным". Обязателен.
fill-rule="часть презентационных атрибутов заливки"
+ презентационные атрибуты:
Color, FillStroke, Graphics, Markers
<polyline>Определяет ломанную линиюpoints="узлы ломанной линии". Обязателен.
+ презентационные атрибуты:
Color, FillStroke, Graphics, Markers
<radialGradient>Определяет радиальный градиент. Радиальные градиенты создаются следующим образом: накладывается круг и плавно меняются значения между градиентными точками остановки от точки фокуса к внешнему радиусу.gradientUnits="'userSpaceOnUse' или 'objectBoundingBox'. Используйте область видимости или объект, чтобы определить относительную позицию точек вектора. (по умолчанию 'objectBoundingBox')"
gradientTransform="трансформация, применяемая к градиенту"
cx="x центра градиента (число или % - по умолчанию 50%)"
cy="y центра градиента (по умолчанию 50%)"
r="радиус градиента (по умолчанию 50%)"
fx="x точки фокуса градиента (по умолчанию 0%)"
fy="y точки фокуса градиента (по умолчанию 0%)"
spreadMethod="'pad' или 'reflect' или 'repeat'"
xlink:href="ссылка на другой градиент, чьи атрибуты используются как атрибуты по умолчанию. Работает рекурсивно"
<rect>Определяет прямоугольникx="x верхнего левого угла"
y="y верхнего левого угла"
rx="x радиуса (чтобы скруглить элемент)"
ry="y радиуса (чтобы скруглить элемент)"
width="ширина прямоугольника". Обязательный атрибут.
height="высота прямоугольника". Обязательный атрибут.
+ презентационные атрибуты:
Color, FillStroke, Graphics
scriptКонтейнер для скриптов (например, ECMAScript)
setУстанавливает значение атрибута на заданную длительность
<stop>Точка остановки градиентаoffset="смещение точки остановки (от 0 до 1 или от 0% до 100%)". Обязательный атрибут.
stop-color="цвет точки остановки"
stop-opacity="прозрачность точки остановки (от 0 до 1)"
styleПозволяет подключать каскадные таблицы стилей непосредственно внутри содержимого SVG
<svg>Создает фрагмент SVG документаx="x верхнего левого угла (по умолчанию 0)"
y="y верхнего левого угла (по умолчанию 0)"
width="ширина svg фрагмента (по умолчанию 100%)"
height="высота svg фрагмента (по умолчанию 100%)"
viewBox="точки "видимости" в этой SVG области рисования. 4 значения, разделенных пробелом или запятой. (мин x, мин y, ширина, высота)"
preserveAspectRatio="'none' или любая из 9 комбинаций вида 'xVALYVAL', где VAL это 'min', 'mid' или 'max'. (по умолчанию xMidYMid)"
zoomAndPan="'magnify' или 'disable'. Значение 'magnify' позволяет пользователям панаромировать и увеличивать файл (по умолчанию magnify)"
xml="внешний <svg> элемент должен устанавливать SVG и свое пространство имен: xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve""
+ презентационные атрибуты:
Все
switch
symbol
<text>Определяет текстx="список координат по оси x. N-e количество x-координат соответствует n-му количеству символов текста. Если есть дополнительные символы, которые идут после того, как позиции закончились, то они ставятся после последнего символа. 0 по умолчанию"
y="список координат по оси y. (см. x). 0 по умолчанию"
dx="список длин по оси x, сдвигающие символы относительно абсолютной позиции последнего нарисованного глифа. (см. x)"
dy="список длин по оси y, сдвигающие символы относительно абсолютной позиции последнего нарисованного глифа. (см. x)"
rotate="список значений разворотов. N-e количество разворотов соответствует n-му количеству символов текста. Дополнительным символам не дается последнее значение разворота"
textLength="конечная длина текста, в которую средства просмотра SVG будут пытаться уместить текст, изменяя расстояние между символами и их размеры. (по умолчанию стандартная длина текста)"
lengthAdjust="указывает средствам просмотра, чем манипулировать, пробелами и символами или только пробелами, для того, чтобы сделать текст нужной длины, если задана конечная длина текста. Принимает значения 'spacing' и 'spacingAndGlyphs'"
+ презентационные атрибуты:
Color, FillStroke, Graphics, FontSpecification, TextContentElements
textPath
titleТекстовое описание для SVG элементов. Не отображается как часть графики, но программы просмотра могут показывать этот текст как всплывающие подсказки
<tref>Ссылается на элемент <text> в SVG документе и повторно использует егоИдентичны элементу <text>
<tspan>Идентичен элементу <text>, но при этом может быть вложен в тег <text> и в сам себяИдентичны элементу <text>
+ дополнительно:
xlink:href="ссылка на элемент <text>"
<use>Использует URI, чтобы ссылаться на теги <g>, <svg> или другие графические элементы с уникальным атрибутом id и копировать его. Копия будет только ссылкой на оригинал, таким образом существовать в документе будет только оригинал. Любые изменения в оригинале будут отражаться во всех его копиях.x="координата x верхнего левого угла клонированного элемента"
y="координата y верхнего левого угла клонированного элемента"
width="ширина клонированного элемента"
height="высота клонированного элемента"
xlink:href="URI ссылка на клонированный элемент"
+ презентационные атрибуты:
Все
view
vkern

msiter.ru

Карманное руководство по написанию SVG. Глава 1 — CSS-LIVE

Перевод книги Pocket Guide to Writing SVG, c разрешения автора — Джони Трайтел.

Глава 1. Организация документа

Все детали SVG находятся в элементе <svg>. Этот элемент содержит несколько атрибутов, которые позволяют настроить ваш графический «холст». Хотя отрисовать изображение можно и без этих атрибутов, но если их не указывать, то более сложная графика может остаться уязвимой к особенностям браузеров и риск, что она в них не отобразится как надо, будет выше.

Как уже упоминалось, встроенная графика может быть написана «вручную», или копированием XML-кода, сгенерированного программой для векторной графики. В любом случае, правильная организация и структура являются ключевыми для написания эффективного SVG-кода, и прежде всего потому, что эти графические элементы определяют их порядок наложения.

Организация и семантика

Фрагмент SVG-документа состоит из неограниченного количества SVG-элементов, находящихся внутри элемента <svg>. Организация внутри этого документа является ключевой. Содержимое внутри документа может быстро расширяться, а правильная организация способствует доступности и эффективности во всех отношениях, от чего выигрывают как автор, так и пользователи.

Этот раздел будет знакомством с основами написания SVG – элементом <svg> и обзором некоторых общих атрибутов, которые помогают в начальной установке документа.

Элемент svg

Элемент <svg> является и контейнером, и структурным элементом, и может быть использован для вложения отдельного SVG-фрагмента внутрь документа. Этот фрагмент устанавливает свою собственную систему координат.

Атрибуты, используемые внутри элемента, такие как width, height, preserveAspectRatio и viewBox определяют холст для создаваемой графики.

При получении SVG-кода из определённых графических программ, внутрь элемента <svg> добавляется много информации, такой как номер SVG-версии (указывает используемую версию языка SVG) и DOCTYPE. Как я упоминала, эта информация не будет включена в примеры на всём протяжении этого руководства, и их исключение не помешает вашей графике отобразиться на экране.

Элемент g

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

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

Любой элемент, который не содержится внутри g, рассматривается как группа из него одного.

Элемент use

Элемент <use> позволяет повторно использовать элементы в любом месте документа. К этому элементу можно добавить такие атрибуты, как x, y, width и height, которые определяют подробности положения элемента в системе координат.

Атрибут xlink:href здесь позволяет обратиться к элементу, чтобы использовать его повторно. Например, если у нас есть элемент <g> с идентификатором «apple», содержащий изображение яблока, то на это изображение можно ссылаться с помощью <use>: <use x="50" y="50" xlink:href="#apple" />.

Этот элемент может существенно сэкономить время и помочь минимизировать требуемый код.

Элемент defs

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

Графика определяется внутри <defs> и затем может быть использована во всём документе с помощью привязки по id.

Например, следующий код рисует очень простой градиент внутри прямоугольника:

<svg>
    <defs>
        <linearGradient>
            <stop offset="0%" stop-color="#bbc42a" />
            <stop offset="100%" stop-color="#765373" />
        </linearGradient>
    </defs>   
    <rect x="10" y="10" fill= "url(#Gradient-1)" stroke="#333333" stroke-width="3px" />
</svg>

 

Содержимое <defs> визуально никак не отображается, пока на него не сошлются по уникальному id, в данном случае с помощью атрибута fill прямоугольника

Элемент symbol

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

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

Область просмотра SVG и viewBox, которые устанавливают систему координат для графики, преобразуемой для вывода, будут рассмотрены далее в другом разделе.

Порядок наложения

Порядок наложения SVG не может управляться через z-index в CSS, как другие элементы внутри HTML. Порядок, в котором раскладываются SVG-элементы, полностью зависит от их размещения внутри фрагмента документа.

Виноград и арбуз ниже находятся внутри одного и того же элемента <svg>. Арбуз располагается впереди винограда, так как группа, содержащая пути, из которых в итоге получается арбуз, следует в документе после винограда.

<svg>
    <g>
        <!--<path <путь для черешка> />-->
        <!--<path <путь для винограда> />-->
        <!--<path <путь для листочка> />-->
    </g>
    <g>
        <!--<path <путь для корки> />-->
        <!--<path <путь для мякоти> />-->
        <!--<path <путь для семечек> />-->
    </g>
</svg>

Если бы группа, содержащая виноград, была перемещена в конец документа, тогда она оказалась бы перед арбузом.

<svg>
    <g>
        <!--<path <путь для корки> />-->
        <!--<path <путь для мякоти> />-->
        <!--<path <путь для семечек> />-->
    </g>
    <g>
        <!--<path <путь для черешка> />-->
        <!--<path <путь для винограда> />-->
        <!--<path <путь для листочка> />-->
    </g>
</svg>

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

Публикуется под лицензией Attribution-NonCommercial-ShareAlike 4.0

P.S. Это тоже может быть интересно:

css-live.ru

Справочник SVG элементов - Веб-технологии для разработчиков

« SVG / Справочник SVG атрибутов »

SVG элементы

A B C D E F G H I J K L M N O P Q R S T U V — Z

Элементы SVG по категориям

Элементы анимации

<animate>, <animateColor>, <animateMotion>, <animateTransform>, <discard>, <mpath>, <set>

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

<circle>, <ellipse>, <line>, <polygon>, <polyline>, <rect>

Контейнеры

<a>, <defs>, <glyph>, <g>, <marker>, <mask>, <missing-glyph>, <pattern>, <svg>, <switch>, <symbol>, <unknown>

Элементы описания

<desc>, <metadata>, <title>

Фильтры

<feBlend>, <feColorMatrix>, <feComponentTransfer>, <feComposite>, <feConvolveMatrix>, <feDiffuseLighting>, <feDisplacementMap>, <feDropShadow>, <feFlood>,<feFuncA>, <feFuncB>, <feFuncG>, <feFuncR>,<feGaussianBlur>, <feImage>, <feMerge>, <feMergeNode>, <feMorphology>, <feOffset>, <feSpecularLighting>, <feTile>, <feTurbulence>

Элементы шрифта

<font>, <font-face>, <font-face-format>, <font-face-name>, <font-face-src>, <font-face-uri>, <hkern>, <vkern>

Градиентные элементы

<linearGradient>, <meshgradient>, <radialGradient>, <stop>

Графические элементы

<circle>, <ellipse>, <image>, <line>, <mesh>, <path>, <polygon>, <polyline>, <rect>, <text>, <use> 

Элементы ссылки на графику

<mesh>, <use>

Источники света

<feDistantLight>, <fePointLight>, <feSpotLight> 

Непрозрачные элементы

<clipPath>, <defs>, <hatch>, <linearGradient>, <marker>, <mask>, <meshgradient>, <metadata>, <pattern>, <radialGradient>, <script>, <style>, <symbol>, <title> 

Элементы сервера печати

<hatch>, <linearGradient>, <meshgradient>, <pattern>, <radialGradient>, <solidcolor> 

Отличительные элементы

<a>, <circle>, <ellipse>, <foreignObject>, <g>, <image>, <line>, <mesh>, <path>, <polygon>, <polyline>, <rect>, <svg>, <switch>, <symbol>, <text>, <textPath>, <tspan>, <unknown>, <use> 

Элементы формы

<circle>, <ellipse>, <line>, <mesh>, <path>, <polygon>, <polyline>, <rect>

Структурные элементы

<defs>, <g>, <svg>, <symbol>, <use>

Элементы текстового контента

<altGlyph>, <altGlyphDef>, <altGlyphItem>, <glyph>, <glyphRef>, <textPath>, <text>, <tref>, <tspan>

Текстовые контентные дочерние элементы

<altGlyph>, <textPath>, <tref>, <tspan>

Некатегоризированные элементы

<clipPath>, <color-profile>, <cursor>, <filter>, <foreignObject>, <hatchpath>, <meshpatch>, <meshrow>, <script>, <style>, <view> 

Смотрите также

 

 

developer.mozilla.org

Введение - Веб-технологии для разработчиков

SVG это язык XML разметки, схожий с XHTML, который может использоваться для рисования векторной графики, такой как та, что показана справа. Он может быть использован для создания изображения путем указания всех необходимых линий и форм, путем модификации уже существующих растровых изображений, или путем комбинации обоих. Изображения и их компоненты также могут быть трансформированы, собраны вместе, или отфильтрованы чтобы полностью изменить их внешний вид.

SVG берёт свое начало в 1999 году, когда после некоторой конкуренции форматов был включен в W3C, но не был полностью ратифицирован. SVG поддерживается всеми наиболее популярными браузерами. Недостатком использования является медленная загрузка SVG. При этом SVG предлагает некоторые преимущества, такие как наличие соответствующего DOM interface, и отсутствие необходимости в стороннем расширении. Использовать данное решение или нет, часто зависит от конкретного случая применения.

Базовые компоненты

В HTML имеются элементы для определения заголовков, параграфов, таблиц и т.п. В SVG, с другой стороны, имеются элементы для кругов, прямоугольников, и простых и сложных кривых. Простой SVG документ состоит из корневого элемента <svg> и нескольких основных форм, которые вместе обеспечивают построение рисунка.  Кроме того, есть элемент <g>, который используется для группировки нескольких основных форм вместе.

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

До начала работы

Существует ряд приложений для рисования, такие как Inkscape, которые распространяются бесплатно и используют SVG в качестве их родного файлового формата. Однако, это руководство полагается только на надежный XML или текстовый редактор (на ваш выбор). Идея в том, чтобы обучить основам SVG тех, кто хочет понять его, и это лучше всего сделать, самостоятельно поработав с разметкой. При этом вы должны знать свою конечную цель. Не все программы просмотра SVG одинаковы, и поэтому существует высокий шанс того, что написанное для одного приложения не будет отображаться таким же образом в другом, просто потому что они поддерживают разные уровни SVG детализации или другую детализацию, которую вы используете наряду с SVG (такую как, JavaScript или CSS).

SVG поддерживается во всех современных браузерах и даже, в некоторых случаях, паре устаревших версий. Вполне полная таблица поддерживающих браузеров может быть найдена в Can I use. Firefox поддерживает некоторый контент SVG, начиная с версии 1.5, и этот уровень поддержки растет с каждым новым выпуском.  К счастью, наряду с этим руководством, MDN может помочь разработчикам не отставать от изменений между Gecko и некоторыми другими основными реализациями.

Перед тем как начать,  вы должны иметь основное понимание XML или другого языка разметки, такого как HTML. Если вы не очень знакомы с XML, ниже имеются некоторые рекомендации, которые следует иметь ввиду:

  • Элементы и атрибуты SVG должны быть все введены в указанном регистре, поскольку XML обладает чувствительностью к регистру (в отличии от HTML).
  • Значения атрибутов в SVG должны быть помещены внутри кавычек, даже если они являются цифрами.

SVG имеет довольно большую спецификацию. Это руководство охватывает только основы. После ознакомления с ними, тебе следует использовать Element Reference и Interface Reference,  чтобы найти что-либо еще при необходимости.

Особенности SVG

Начиная с рекомендации 2003 года, самой свежей "полной" версией SVG является версия 1.1. Она построена на SVG 1.0, но содержит также больше модулязаций для упрощения реализации. Второй выпуск SVG 1.1 стал Рекомендацией в 2011 году. "Полная" версия SVG 1.2 стала следующим главным выпуском SVG. Ей пришла на смену развивающаяся SVG 2.0, которая сейчас усиленно разрабатывается и следует схожему с CSS 3 подходу, в котором она разделяет компоненты в несколько свободно связанных специфирований.

Кроме полных рекомендаций SVG, рабочая группа при W3C ввела SVG Tiny и SVG Basic в 2003 году. Эти две версии нацелены главным образом на мобильные устройства. Первый, SVG Tiny, должен выдавать графические примитивы для небольших устройств с низкими возможностями. SVG Basic имеет много общего с полным SVG, но не включает те компоненты, что трудны для реализации или являются тяжелыми для воспроизведения (как анимации). В 2008, SVG Tiny 1.2 стала Рекомендацией W3C.

Существовали планы для специфирования SVG Print, которая имела бы поддержку для множества страниц и улучшенное управление цветом. Эта работа была прекращена.

developer.mozilla.org

SVG и CSS - Веб-технологии для разработчиков

На этой странице показано, как использовать CSS со специальным языком для создания графики: SVG.

Вы сделаете небольшой пример, которые можно будет запустить в любом браузере с поддержкой SVG.

Это вторая секция Части II Руководство по CSS.
Предыдущая секция: JavaScript
Следующая секция: Данные XML

Общая информация: SVG

SVG (Scalable Vector Graphics) является подмножеством языка XML и предназначен для создания графики.

SVG можно использовать для статических изображений, а также для анимаций и создания пользовательских интерфейсов.

Как и прочие языки, основанные на XML, SVG поддерживает использование таблиц стилей CSS, что позволяет отделить различные варианты визуального отображения от структуры данных.

Кроме того, таблицы стилей, которые вы используете в других языках разметки документов, могут содержать ссылку на SVG графику, в тех местах, где необходимо изображение. Например, в таблице стилей, для вашего HTML документа, можно указать ссылку (URL) на SVG графику в свойстве background.

Немного подробностей

На момент написания статьи (середина 2011года), большинство современных браузеров имеет базовую поддержку SVG, в том числе Internet Explorer 9 и выше. Некоторые дополнительные возможности SVG не поддерживаются, либо поддерживаются лишь частично, в определенных браузерах. Для более подробной информации о текущей поддержке SVG, см. SVG tables on caniuse.com, либо в таблицах совместимости SVG element reference, для информации о поддержке отдельных элементов.

В остальные версии можно добавить поддержку SVG, установив дополнительный плагин, например, предоставленный компанией Adobe.

Более подробная информация о SVG в Mozilla, представлена на станице SVG в этой wiki.

За дело: Демонстрация SVG

Создайте новый документ SVG, как обычный текстовый файл, doc8.svg. Скопируйте и вставьте содержимое блока ниже, убедитесь, что пролистали его полностью, чтобы скопировать все:

<?xml version="1.0" standalone="no"?>

<?xml-stylesheet type="text/css" href="style8.css"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg viewBox="-300 -300 600 600"
  xmlns="http://www.w3.org/2000/svg" version="1.1"
  xmlns:xlink="http://www.w3.org/1999/xlink">

<title>SVG demonstration</title>
<desc>Mozilla CSS Getting Started - SVG demonstration</desc>

<defs>
  <g>
    <path d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
    <path d="M0,-200 a40,40 0 0,0 -62,10"/>
    </g>
  <g>
    <use xlink:href="#segment"/>
    <use xlink:href="#segment" transform="rotate(18)"/>
    <use xlink:href="#segment" transform="rotate(36)"/>
    <use xlink:href="#segment" transform="rotate(54)"/>
    <use xlink:href="#segment" transform="rotate(72)"/>
    </g>
  <g>
    <use xlink:href="#quadrant"/>
    <use xlink:href="#quadrant" transform="rotate(90)"/>
    <use xlink:href="#quadrant" transform="rotate(180)"/>
    <use xlink:href="#quadrant" transform="rotate(270)"/>
    </g>
  <radialGradient cx="0" cy="0" r="200"
      gradientUnits="userSpaceOnUse">
    <stop offset="33%"/>
    <stop offset="95%"/>
    </radialGradient>
  </defs>

<text x="-280" y="-270">
  SVG demonstration</text>
<text  x="-280" y="-250">
  Move your mouse pointer over the flower.</text>

<g>
  <circle cx="0" cy="0" r="200"
    stroke="none" fill="url(#fade)"/>
  <use xlink:href="#petals"/>
  <use xlink:href="#petals"
    transform="rotate(9) scale(0.33)"/>
  </g>

</svg>

Создайте новый файл CSS, style8.css. копируйте и вставьте содержимое блока ниже, убедитесь, что пролистали его полностью, чтобы скопировать все:

/*** SVG demonstration ***/

/* page */
svg {
  background-color: beige;
  }

#heading {
  font-size: 24px;
  font-weight: bold;
  }

#caption {
  font-size: 12px;
  }

/* flower */
#flower:hover {
  cursor: crosshair;
  }

/* gradient */
#fade-stop-1 {
  stop-color: blue;
  }

#fade-stop-2 {
  stop-color: white;
  }

/* outer petals */
#outer-petals {
  opacity: .75;
  }

#outer-petals .segment-fill {
  fill: azure;
  stroke: lightsteelblue;
  stroke-width: 1;
  }

#outer-petals .segment-edge {
  fill: none;
  stroke: deepskyblue;
  stroke-width: 3;
  }

#outer-petals .segment:hover > .segment-fill {
  fill: plum;
  stroke: none;
  }

#outer-petals .segment:hover > .segment-edge {
  stroke: slateblue;
  }

/* inner petals */
#inner-petals .segment-fill {
  fill: yellow;
  stroke: yellowgreen;
  stroke-width: 1;
  }

#inner-petals .segment-edge {
  fill: none;
  stroke: yellowgreen;
  stroke-width: 9;
  }

#inner-petals .segment:hover > .segment-fill {
  fill: darkseagreen;
  stroke: none;
  }

#inner-petals .segment:hover > .segment-edge {
  stroke: green;
  }

Откройте документ в вашем браузере с поддержкой SVG. Переместите указатель мыши на изображение.

Эта wiki не поддерживает вставку SVG в страницы, поэтому мы не имеем возможности продемонстрировать это здесь. Изображение будет выглядеть так:

Примечания к демонстрации:

  • Документ SVG привязывается к таблице стилей общепринятым способом.
  • SVG содержит собственные свойства CSS и их значения. Некоторые из них похожи на значения CSS для HTML.
Задание
Измение таблицу стилей так, чтобы все внутренние лепестки становились розовыми, по наведению курсора на одного из них, при этом нельзя менять принцип работы других лепестков.

Посмотреть решение к этому заданию.

Что дальше?

В этой демонстрации, ваш браузер с поддержкой SVG уже знает, как отображать элементы  SVG. Таблица стилей всего лишь некоторым образом меняет отображение. То же самое происходит с документами HTML и XUL. Однако CSS можно использовать для любых документов XML, в которых нет предусмотренного по умолчанию способа отображения элементов. Данный пример продемонстрирован на следующей странице: Данные XML

developer.mozilla.org

SVG: основы векторной графики в HTML

26.12.2014

Векторная графика широко используется в печатном деле. Но и для веб сайтов мы можем использовать её с помощью SVG (Scalable Vector Graphic - масштабируемая векторная графика). В соответствии соспецификацией W3.org SVG определяется как:

Язык для описания двумерной графики в XML. SVG допускает использование трех типов объектов: векторные графические формы (наппример, пути, состоящие из прямых линий и кривых), изображения и текст.

Несмотря на то, с августа 2011 года SVG включено в рекомендации W3C, данная технология практически не используется в веб проектах, хотя и имеет перед растровыми изображениями ряд преимуществ. В данной серии уроков мы представим, как работать с SVG элементами на веб страницах.

Преимущества SVG

Независимость разрешения

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

Уменьшение количества запросов HTTP

SVG может быть встроено непосредственно в документ HTML с помощью тега svg, поэтому браузер не нуждается в запросах для обслуживания графики. Такой подход хорошо влияет на характеристики загрузки веб сайта.

Стили и скрипты

Встраивание с помощью тега svg также позволяет легко определять стили для графики с помощью CSS. Можно изменять свойства объекта, такие как цвет фона, прозрачность, рамки и так далее. Подобным же образом можно манипулировать графикой с помощью JavaScript.

Легко редактировать и анимировать

Объекты SVG можно анимировать с помощью CSS или JavaScript. Также объекты SVG можно модифицировать с помощью текстового редактора.

Меньший размер файла

SVG имеет меньший размер файла по сравнению с растровой графикой.

Базовые формы SVG

В соответствии со спецификацией мы можем рисовать несколько базовых форм: линия, полилиния, прямоугольник, круг, эллипс. Все элементы должны быть вставлены в тег <svg> ... </svg>. Рассмотрим базовые элементы подробно.

Линия

Для вывода линии в SVG используется элемент <line>. Он рисует отрезок, для которого нужно определить две точки: начало и конец.

  <svg>
  <line x1="0" y1="0" x2="200" y2="200" stroke-width="1" stroke="rgb(0,0,0)"/>
  </svg>

Начало отрезка определяется атрибутами  x1 и y1, а конечная точка определяется координатами в атрибутах x2and y2.

Также имеется два других атрибута (stroke и stroke-width) которые используются для определения цвета и ширины линии соответственно.

 

 

Прямоугольник

Прямоугольник выводится с помощью элемента <rect>. Нужно определить ширину и высоту.

  <svg>
  <rect fill="rgb(234,234,234)" stroke-width="1" stroke="rgb(0,0,0)"/>
  </svg>

 

Круг

Для вывода круга используем элемент <circle>. В следующем примере мы создаем круг с радиусом 100, который определяется в атрибуте r:

  <svg>
  <circle cx="102" cy="102" r="100" fill="rgb(234,234,234)" stroke-width="1" stroke="rgb(0,0,0)"/>
  </svg>

Первый два атрибута cx и cy определяют координаты центра. В выше приведенном примере мы установили значение 102 для обеих координат. По умолчанию используется значение 0.

 

 

Эллипс

Для вывода эллипса используем элемент <ellipse>. Он работает так же, как и круг, но мы можем специально задавать радиусы по оси x и y с помощью атрибутов rx и ry:

  <svg>
  <ellipse cx="100" cy="50" rx="100" ry="50" fill="rgb(234,234,234)" stroke-width="1" stroke="rgb(0,0,0)"/>
  </svg>

Использование редактора для векторной графики

Вывод простых объектов SVG в HTML осуществляется просто. Однако, когда сложность объекта увеличивается, подобная практика может привести к большому объему нужной работы.

Но вы можете воспользоваться любым редактором для векторной графики (например, Adobe Illustrator илиInkscape) для создания объектов. Если вы владеете подобным инструментом, рисовать  в них нужные объекты существенно проще, чем кодировать графику в теге HTML.

Можно копировать команды для векторной графики из файла в документ HTML. Или можно встраивать файл.svg с помощью одного из следующих элементов: embediframe и object.

  <object data="images/ipod.svg" type="image/svg+xml"></object>

Результат будет одинаковым.

 

Поддержка в браузерах

SVG имеет хорошую поддержку в большинстве современных браузеров, за исключением IE версии 8 и более ранних. Но задачу можно решить с помощью библиотеки JavaScript Raphael.js. Для облегчения работы можно воспользоваться инструментом ReadySetRaphael.com для конвертации кода SVG в формат Raphael.

Сначала загружаем и включаем библиотеку Raphael.js в документ HTML. Затем загружаем файл .svg, копируем и вставляем полученный код в функцию после загрузки:

  window.onload=function() { 
           // Код Raphael размещается здесь
  }

В теге body размещаем следующий элемент div с идентификатором rsr.

  <div></div>

И все готово.

Источник

mortwood.by

Отправить ответ

avatar
  Подписаться  
Уведомление о