English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Учебник по SVG

элемент SVG

Отображение SVG в вебе

Отображение SVG в веб-браузере (например, Chrome, Firefox и Internet Explorer) можно выполнить, указав браузеру URL файла SVG, внедрив SVG в страницу HTML, используя элемент iframe, элемент img и другие методы

Отображение SVG в веб-браузере (например, Chrome, Firefox и Internet Explorer) можно выполнить следующими способами:

  • браузер указывает на URL файла SVG.

  • внедрить SVG в страницу HTML

Вы можете嵌入 SVG-изображение в HTML-файл несколькими способами:

  • используя элемент iframe

  • используя элемент img

  • используя SVG-изображение в качестве фонового изображения.

  • используя элемент svg

  • используя внедренные элементы

рамка iframe

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

<iframe src="mySvgImage.svg" width="200" height="200">

img

SVG, как и любое другое изображение, можно использовать для внедрения в элементы. Вы можете ввести URL изображения SVG в атрибут src элемента img, например:

<img　src="/svg/circle-element-1.jsp">

SVG-изображение будет отображаться на HTML-странице так же, как и любое другое изображение.

SVG в качестве фонового изображения

Поскольку браузер обрабатывает SVG-изображения так же, как и растровые изображения, вы можете использовать SVG-изображения в качестве фоновых изображений с помощью CSS. Вот пример:

div　{
　　　　background-image:　url('my-svg-image.svg');
　　　　background-size　:　100px　100px;
{}

Возможно, вам нужно установить размер фона для SVG-изображения, чтобы告诉 браузеру, как его масштабировать. Вы можете это сделать в моемУрок по фоновым изображениям CSSузнать больше о фоновых изображениях.

Элементы svg в HTML

Внедрение изображений SVG с помощью элементов SVG можно напрямую внедрять элементы SVG в HTML-страницу, как показано ниже:

<div><svg>
　　　　<circle　cx="40"　cy="40"　r="24"　style="stroke:#006600;　fill:#00cc00"/>
　　　　</svg></div>

Элемент div здесь используется только для того, чтобы показать, что элемент svg可以直接 внедряться в HTML. Однако, элемент svg не обязан внедряться в элемент div.

Используя элемент SVG, вы可以直接 внедрить SVG в HTML-страницу, а не хранить SVG-изображение в отдельном файле. Вы можете установить ширину и высоту изображения SVG, добавив атрибуты width и height к элементу SVG.

Используя элемент svg, вы также можете напрямую генерировать svg в браузере с помощью JavaScript. API JavaScript D3 очень хорошо справляется с этим. API JavaScript jQuery также может это сделать.

Используя элемент svg, вы также можете использовать CSS для стилизации svg и его подэлементов, как и для любого другого HTML. Обратите внимание, что имена некоторых CSS-атрибутов элементов SVG иногда отличаются от имен атрибутов элементов HTML.

embed

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

<embed　src="/svg/simple-example-1.jsp"
　　　　　　　width="300"　height="220"
　　　　　　　type="image/svg+xml"
　　　　　　　pluginspage="http://www.adobe.com/svg/viewer/install/"　/>

Разместите этот элемент в месте отображения SVG изображения в HTML файле. Атрибут src должен указывать на URL SVG изображения.

Обратите внимание на атрибут pluginspage. Это необходимо для старых браузеров, которые не могут отображать SVG нативно. Эти браузеры нуждаются в плагине Adobe SVG Viewer для отображения изображений. В Internet Explorer 7 и Firefox 3.0.5 этот атрибут не требуется, но его наличие не помешает.

Атрибуты Width и Height

Независимо от того, используете ли вы элемент img, svg или embed для внедрения svg изображения, вы можете использовать атрибуты width и height для установки ширины и высоты изображения. Если изображение в файле SVG шире или выше этих чисел, то будет отображаться только часть SVG изображения. Убедитесь, что вы установили достаточную ширину и высоту, чтобы отображать полное изображение SVG (или ширину, которую вы хотите отображать).

Использование SVG в качестве фона HTML элемента

Вы можете использовать атрибут background-image CSS, чтобы использовать изображение SVG в качестве фона HTML элемента. Достаточно указать файл SVG изображения, как и в случае с любым другим изображением файла. Не все браузеры поддерживают это полностью, проверьте это в браузерах, которые вы планируете поддерживать. Вот пример:

.myCSSClass {
　　　　background: url(/mySvgImage.svg);
{}

Совместимость браузеров

Internet Explorer Версии 9 и выше могут отображать SVG нативно. На момент написания этой статьи Firefox, Chrome, Safari, Opera и браузеры Android уже могли нативно отображать SVG в течение определённого времени. iOS-версия Safari, Opera Mini и мобильные браузеры, а также браузеры Android Chrome также могут это сделать.

Content Type

Если вы указываете URL браузера, заканчивающийся на .svg, браузер сможет угадать mime-тип файла SVG. Однако, когда SVG генерируется из servlet, JSP, PHP, ASP.NET страницы или других компонентов веб-приложения, конец URL не всегда заканчивается на .svg.
Чтобы браузер по-прежнему интерпретировал файл как файл SVG, вам нужно установить заголовок Content-Type HTTP ответа.

image/svg+xml

Если вы посмотрите на предыдущий элемент <embed>, вы заметите, что так же поступают и в атрибуте type. Установка типа контента в элементе <embed> достаточно для Internet Explorer, но для Firefox этого недостаточно. Ещё нужно установить его в заголовке Content-Type HTTP ответа.

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

<%　response.setContentType("image/svg+xml");%>
<svg　...　>

Это очень похоже на выполнение в servlet. Если используется технология, отличная от Java, просто поищите в Google примеры того, как устанавливать тип содержимого в HTTP-ответе. Будет много примеров.

Иконки SVGПростые примеры SVG