Paste svg to html

Содержание

SVG in HTML
Embed SVG Directly Into HTML Pages
Example
My first SVG
COLOR PICKER
Report Error
Thank You For Helping Us!
Как правильно вставлять SVG
SVG In HTML Introduction
Basic example
Discussion
Best practices
See also
Found a content problem with this page?

SVG in HTML

You can embed SVG elements directly into your HTML pages.

Embed SVG Directly Into HTML Pages

Here is an example of a simple SVG graphic:

Sorry, your browser does not support inline SVG.

and here is the HTML code:

Example

My first SVG

An SVG image begins with an
The width and height attributes of the
The element is used to draw a circle
The cx and cy attributes define the x and y coordinates of the center of the circle. If cx and cy are not set, the circle’s center is set to (0, 0)
The r attribute defines the radius of the circle
The stroke and stroke-width attributes control how the outline of a shape appears. We set the outline of the circle to a 4px green «border»
The fill attribute refers to the color inside the circle. We set the fill color to yellow
The closing tag closes the SVG image

Note: Since SVG is written in XML, all elements must be properly closed!

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

Как правильно вставлять SVG

SVG — это формат векторной графики, дословно: масштабируемая векторная графика. МВГ? SVG! В векторных форматах хранится не само изображение, а инструкция по его построению по точкам и кривым.

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

�PNG IH�aV PLTE�������0� IDAcZ�d���� �W= S�3�o;���]P ���IEND�B`�~

Формат SVG тоже можно создавать и менять в редакторах графики, вроде Illustrator, Sketch или Inkscape. Но ещё он текстовый, а значит его можно открыть как HTML или CSS в любом редакторе кода.

Я вам больше скажу: SVG — это как отдельная HTML-страница. Когда вы вставляете SVG, вы, на самом деле, вставляете не просто картинку, а целую страницу. Со своей системой координат, вьюпортом, стилями, скриптами и удивительными особенностями.

Стилями и скриптами, Карл! Вот вам и простая картинка.

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

Первый и самый простой — элемент прямо в HTML-коде. Это в принципе самый эффективный способ загрузить любую картинку — браузеры заранее знают по HTML-коду, что она есть и начинают её подгружать.

Минус в том, что в таком SVG не будут работать скрипты и любые попытки взаимодействия с элементами внутри обречены. Файл будет как за стеклом: смотреть можно, а трогать нельзя. Хотя внутри всё остальное прекрасно работает, включая CSS-анимации.

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

Второй способ — фоновая картинка в CSS. Причём неважно, зададите вы его элементу, псевдоэлементу или контентом вставите — результат будет таким же, как с : за стеклом, но внутри что-то работает.

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

Третий способ, через , наконец-то выбивает стекло между страницей и внутренностями SVG-файла. Работают скрипты, взаимодействие, анимация — если они описаны внутри SVG. Между тегами можно вставить фолбэк, который покажется, если браузер не говорит на SVG.

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

За гибкость приходится платить: из-за того, что это уже не просто графика и там можно скриптовать, к такому способу предъявляются другие требования безопасности. Например, картинку с другого домена просто так уже не вставить.

Этот способ подходит, когда вам нужно вставить какую-то интерактивную графику: игрушки, графики и всякое сложное. Достаточно вспомнить, что когда-то через вставлялись Flash-ролики. Спросите у родителей, что это такое.

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

С таким SVG можно делать то же, что и с обычными HTML-элементами: стили, скрипты — ну, вы сами знаете. Можно, например, менять цвет заливки при наведении и описывать всё в общих стилях.

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

SVG гораздо больше, чем просто формат графики — это мы с вами уже поняли. Хотите закопаться глубже? Читайте статьи Сары Суайдан, это пока лучшее, из того, что есть. Все ссылки есть в описании к видео.

В итоге: способов куча и все чем-то хороши. Выбирайте подходящий под ваши задачи, но всегда начинайте с самых простых: и фона, а потом уже усложняйте — если не хватает.

Источник

SVG In HTML Introduction

This article and its associated example shows how to use inline SVG.

Basic example

To include an inline SVG in an HTML file, paste the entire SVG file into the HTML file.

doctype html> html lang="en-US"> head> meta charset="utf-8" /> title>SVG Demotitle> meta name="viewport" content="width=device-width" /> head> body> svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice" role="img"> title>A gradienttitle> linearGradient id="gradient"> stop class="begin" offset="0%" stop-color="red" /> stop class="end" offset="100%" stop-color="black" /> linearGradient> rect x="0" y="0" width="100" height="100" style="fill:url(#gradient)" /> circle cx="50" cy="50" r="30" style="fill:url(#gradient)" /> svg> body> html>

Discussion

The page is regular HTML and CSS with a single SVG. The only interesting part is the element it contains. This element and its children are declared to be in the SVG namespace. The element contains a gradient and two shapes filled with the gradient. The gradient color stops have their colors set by CSS.

There are three attributes and one nested element worth noting:

The viewBox attribute establishes a logical coordinate system which the SVG picture’s coordinates are relative to. In this case our picture is laid out in a 100 by 100 viewport.
The preserveAspectRatio attribute specifies that the aspect ratio must be preserved by centering the picture in the available size, sizing to the maximum of the height or width and then cutting off any overflow.
Including role=»img» ensures assistive technologies handle the SVG as an image.
A within an SVG provides the accessible, short-text description of the graphic. The title text is not rendered, but browsers may display it as a tooltip when the SVG is hovered. The should be the first element after the opening tag.

Best practices

If the SVG can be labeled by visible text, reference that text with an aria-labelledby attribute. Alternatively, include the aria-labelledby attribute with the id of the .

svg viewBox="0 0 100 125" role="img" aria-labelledby="svgTitle svgDescription"> title id="svgTitle">Manualtitle> desc id="svgDescription"> A non-descript twelve page booklet opened to the middle page desc> defs> style> rect  fill: #cccccc; stroke: #666; transform-origin: top; > style> defs> rect width="36" height="60" x="13" y="18" ry="2" style="transform: skewy(24deg)" /> rect width="39" height="60" x="11" y="20" ry="2" style="transform: skewy(18deg)" /> rect width="42" height="90" x="8" y="22" ry="2" style="transform: skewy(12deg)" /> rect width="36" height="60" x="50" y="18" ry="2" style="transform: skewy(-24deg)" /> rect width="39" height="60" x="50" y="20" ry="2" style="transform: skewy(-18deg)" /> rect width="42" height="90" x="50" y="22" ry="2" style="transform: skewy(-12deg)" /> svg>

If the SVG can be described by visible text, that text can be referenced with the aria-describedby attribute. If aria-describedby is used, it will take precedence over .

In our example, we’ve included both the description and title in our aria-labelledby attribute, as it has better assistive technology support than aria-describedby .