В этой статье вы познакомитесь с основными концепциями, структурой документа и элементами рисования, используемыми в изображениях SVG.
Координатная сетка SVG
SVG определяется в любом координатном пространстве, которое вы ему задаете. Это пространство не обязательно соотносится с пикселями, сантиметрами, дюймами или другими абсолютными единицами, потому что SVG можно масштабировать до любого измерения.
viewBoxАтрибут SVG определяет координаты, которые использует изображение. Следующие SVG-файлы будут выглядеть одинаково при масштабировании до одинакового размера:
- viewBoxиз 0,0к 200,100строчке из 0,0к100,50
- viewBoxиз 0,0к 300,150строчке из 0,0к150,75
- А также viewBoxиз, 0,0чтобы 30,15с линией от 0,0до 15,7.5(доли единицы разрешено)
В отличие от математических графиков, система координат SVG начинается в верхнем левом углу (обычно 0,0) с осью X, направленной вправо, и осью Y, направленной вниз. Таким образом, точка 100,200представляет 100 единиц справа от левого края и 200 единиц вниз от верхнего края.
Когда SVG оказывается, оно может быть дано widthи heightатрибуты или назначены размеры в CSS. Изображение будет растянуто или сжато в обоих направлениях, чтобы заполнить выделенное пространство. Однако SVG может заявить, что его соотношение сторон может быть сохранено, чтобы обеспечить единообразное масштабирование размеров.
XML-документ SVG
Изображение SVG — это XML-документ, который следует строгим соглашениям (закрывающие теги, атрибуты в кавычках и т. Д.). Когда в 1999 году были впервые разработаны SVG, файлы требовали объявления XML и DOCTYPE в верхней части документа над корневым элементом:
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "https://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="https://www.w3.org/2000/svg"> <!-- image data --> </svg>
Вы все еще можете встретить этот формат, но для.svgфайлов обычно используется один корневой элемент:
<svg xmlns="https://www.w3.org/2000/svg">
<!-- image data -->
</svg>xmlns Атрибут обязателен. Большинство браузеров позволяют опускать его, когда SVG встроен непосредственно в HTML, хотя это может привести к проблемам, если вы захотите позже манипулировать изображением:
<svg> <!-- image data --> </svg>
К корневому элементу можно применить множество необязательных атрибутов, но наиболее часто используются следующие:
- viewBox, чтобы установить размеры.
Прямоугольная область координат указывается как «minX minY width height». например, viewBox=»0 0 600 400″это поле 600по 400ширине с координатами в верхнем левом углу 0,0. Помните, что это абстрактное пространство; это не относится к пикселям, и ваши элементы чертежа не ограничиваются этими координатами.
- preserveAspectRatio определяет, как масштабируется окно просмотра.
Есть много вариантов. Например, preserveAspectRatio=»xMidYMid meet»обеспечивает выравнивание середины окна просмотра SVG с серединой окна просмотра (окно браузера или HTML-элемент, содержащий SVG), а изображение соответствует доступному пространству при сохранении соотношения сторон.
- heightиwidth установите внутренний размер изображения.
Например, при настройке width=»300″ height=»200″будет использоваться изображение 300по умолчанию в 200пикселях, если его размер не был задан с помощью CSS. Если ширина и высота заданы без установки a viewBox, предполагается, что количество единиц SVG соответствует этому размеру, то есть viewBox=»0 0 300 200″.
Корневой элемент может сопровождаться дополнительным заголовком и описание определяются с использованием titleи descэлементов. Базовый документ:
<svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 600 400" preserveAspectRatio="xMidYMid meet"> <title>My First Scalable Vector Graphic</title> <desc>An experimental SVG from SitePoint.com</desc> <!-- drawing elements to go here --> </svg>
Группировка элементов
Любой набор элементов (линии, круги, прямоугольники, текст и т. Д.) Можно сгруппировать с помощью …тегов. По сути, это похоже на группировку графических объектов в графическом пакете, чтобы ими можно было манипулировать как одним элементом.
Например, вы можете определить узел корневой группы, чтобы можно было управлять всем изображением с помощью JavaScript или CSS:
<g id="main">
<!-- drawing elements to go here -->
</g>Одна группа может иметь любое количество внутренних групп с вложенностью по мере необходимости.
Линии
Одиночная линия между двумя точками рисуется с помощью lineэлемента :
<line x1="10" y1="10" x2="100" y2="200" stroke="#999" stroke-width="5" stroke-linecap="round" />
stroke-linecap Атрибут определяет линейный конечный эффект и принимает значения butt(по умолчанию), round, squareили inherit:
Полилинии
Полилинии определяют набор соединенных отрезков прямых линий:
<polyline points="580,10 560,390 540,200 520,390 400,390" stroke="#c00" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
stroke-linejoin Атрибут определяет строку-эффект присоединения и принимает значения miter(по умолчанию), round, bevelили inherit:
Полигоны
Полигоны похожи на полилинии, за исключением того, что полученная форма всегда будет закрытой:
<polygon points="350,75 379,161 469,161 397,215 423,301 350,250 277,301 303,215 231,161 321,161" stroke="#ff0" stroke-width="10" fill="#ff6" />
Прямоугольники
Квадратные или закругленные прямоугольники определяются с помощью rectэлемента :
<rect x="100" y="10" width="150" height="100" rx="10" ry="20" stroke="#060" stroke-width="8" fill="#0f0" />
xИ yатрибуты определяют верхний левый угол. rxи ryукажите скругление углов по горизонтали и вертикали.
Круги
Круги определяются с помощью центральной точки и радиуса:
<circle cx="100" cy="300" r="80" stroke="#909" stroke-width="10" fill="#f6f" />
Эллипсы
Эллипсы определяются с помощью центральной точки и двух значений радиуса:
<ellipse cx="450" cy="50" rx="80" ry="30" stroke="#0cc" stroke-width="10" fill="#0ff" />
Текст
Базовый текст можно добавить с помощью textэлемента :
<text x="240" y="390" font-family="sans-serif" font-size="50" fill="#00f">SVG</text>
x и y атрибуты определяют нижнюю левую координату первого символа в строке, хотя text-anchorи dominant-baselineатрибуты предлагают больший контроль над размещением.
Пути
Наконец, есть pathэлемент, который может имитировать любой из перечисленных выше базовых элементов. Обратитесь к разделу » Как создавать сложные пути в SVG » для получения более подробной информации.
Результат
Наш последний документ SVG содержит следующие элементы:
<svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 600 400" preserveAspectRatio="xMidYMid meet"> <title>My First Scalable Vector Graphic</title> <desc>An experimental SVG from SitePoint.com</desc> <g id="main"> <line x1="10" y1="10" x2="100" y2="200" stroke="#00c" stroke-width="5" stroke-linecap="round" /> <polyline points="580,10 560,390 540,200 520,390 400,390" stroke="#c00" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" fill="none" /> <polygon points="350,75 379,161 469,161 397,215 423,301 350,250 277,301 303,215 231,161 321,161" stroke="#ff0" stroke-width="10" fill="#ffc" /> <rect x="100" y="10" width="150" height="100" rx="10" ry="20" stroke="#060" stroke-width="8" fill="#0f0" /> <circle cx="100" cy="300" r="80" stroke="#909" stroke-width="10" fill="#f6f" /> <ellipse cx="450" cy="50" rx="80" ry="30" stroke="#0cc" stroke-width="10" fill="#0ff" /> <text x="240" y="390" font-family="sans-serif" font-size="50" fill="#00f">SVG</text> </g> </svg>
Приведенный выше код выглядит так:
Это простой пример, но размер файла меньше одного килобайта до оптимизации, минификации и сжатия. Эквивалентный сжатый PNG выше почти в пять раз больше, и не может быть масштабируются выше его родным 407по 274разрешению без потери качества.
Вам редко нужно рисовать SVG вручную, поскольку проще использовать графический пакет, такой как Illustrator, Inkscape, SVG-edit или Method Draw. Однако понимание того, как работают основные элементы SVG, может помочь вам оптимизировать изображения или создавать потрясающие изображения на сервере или в JavaScript.
