Статьи

Как стилизовать масштабируемую векторную графику с помощью CSS

Январь 9, 2019

Если вы читали эту серию, вы знаете, что такое SVG , почему вы должны их учитывать , как создавать базовые чертежи и шесть способов встраивания SVG на вашу веб-страницу .

Хотя создание SVG XML может быть простым, код может быть немного многословным, например 


<circle cx="100" cy="300" r="80"
stroke="#909" stroke-width="10" fill="#f6f" />

Разве не было бы здорово, если бы мы могли применять правила стилевого оформления CSS к элементам SVG? Ну, это именно то, что вы можете сделать! Вместо атрибутов вы можете использовать встроенные стили с одинаковыми именами свойств: 

 
<circle cx="100" cy="100" r="80"
style="stroke: #909; stroke-width: 10; fill: #f6f;" />

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

 
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="xMidYMid meet">
	<defs>
		<style type="text/css"><![CDATA[
			circle {
				stroke: #909;
				stroke-width: 10;
				fill: #f6f;
			}
		]]></style>
	</defs>
	<circle cx="100" cy="100" r="80" />
</svg>

Обратите внимание, что блок <! [CDATA […]]> является обязательным, поскольку CSS может содержать> символы, которые могут запутать парсеры XML. Я рекомендую вам использовать их независимо.

Это замечательно, но, как знают все хорошие разработчики, лучше разделить ваши таблицы стилей, чтобы их было проще поддерживать, и их можно использовать в других местах. Мы можем сделать это, добавив новый тег xml-stylesheet сразу после объявления XML: 

 
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml-stylesheet href="styles.css" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg...

Создание логотипа SitePoint как SVG в стиле CSS

SVG идеально подходят для логотипов, поскольку их можно масштабировать до любого размера и использовать в адаптивном шаблоне. Начнем с определения файла sitepoint.svg, который указывает на таблицу стилей с именем sp-styles.css: 

 
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml-stylesheet href="sp-styles.css" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="95 40 550 180" preserveAspectRatio="xMidYMid meet">
	<title>SitePoint</title>
	<desc>The SitePoint Logo</desc>
	<g id="main">

Мы будем следовать за этим с полилинейными элементами для синих углов, но пока не будем беспокоиться о стилизации: 

 
		<polyline points="100,100 150,100 170,150 120,150" />
		<polyline points="170,100 220,100 240,150 190,150" />

Оранжевые наклонные линии определяются с использованием аналогичных полилиний, за исключением того, что мы дадим им класс с именем «оранжевый»: 

 
		<polyline class="orange" points="120,45 170,45 150,95 100,95" />
		<polyline class="orange" points="190,155 240,155 220,205 170,205" />

Заканчиваем текст логотипа и закрываем теги SVG: 

 
		<text id="sp" x="240" y="150">sitepoint</text>
	</g>
</svg>

Стилизированный SVG можно просмотреть в вашем браузере:

не в стиле SVG

Теперь мы добавим несколько простых стилей в файл sp-styles.css. Первый применяет синюю заливку ко всем полилиниям: 

 
polyline
{
	stroke: 0;
	stroke-linejoin: butt;
	fill: #003565;
}

Полилинии с именем класса «оранжевый» будут иметь оранжевую заливку: 

 
polyline.orange
{
	fill: #ff6400;
}

Наконец, мы можем применить простую стилизацию текста. Мы могли бы использовать веб-шрифты или любые стандартные свойства шрифта / текста CSS: 

 
text#sp
{
	font-family: verdana, sans-serif;
	font-size: 570%;
	fill: #003565;
}

Наш SVG теперь готов:

SVG в стиле CSS

Использование SVG в адаптивном дизайне

Простой шаблон HTML5 может быть разработан для отображения SVG в теге object 

 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>SVG logo</title>
</head>
<style>
html, body
{
	width: 100%;
	height: 100%;
	overflow: hidden;
}

#sp
{
	display: block;
	width: 100%;
	height: 100%;
	margin: auto;
}
</style>
<body>

<object id="sp" type="image/svg+xml" data="sitepoint.svg">SitePoint</object>

</body>
</html>

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

Просмотрите демонстрационную страницу логотипа SVG…

Совокупный размер файла SVG и CSS составляет 931 байт до сжатия и сжатия. PNG, показанный выше, не будет хорошо выглядеть при ширине 500 пикселей и имеет размер файла 3,4 КБ после сжатия
… (Хотя это будет работать в IE6 / 7/8!) .

Оставайтесь с нами на SitePoint, чтобы в ближайшее время появилось больше статей о SVG…

И если вам понравилось читать этот пост, вы полюбите Learnable ; место, чтобы узнать новые навыки и приемы у мастеров. Участники получают мгновенный доступ ко всем электронным книгам и интерактивным онлайн-курсам SitePoint, таким как HTML5 и CSS3 для реального мира .

Комментарии к этой статье закрыты. У вас есть вопрос о CSS? Почему бы не спросить об этом на наших форумах ?

35
Share: