Добавление векторной графики в Веб-документ

Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

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

Навыки: Знание основ HTML и умение добавлять изображение в веб-документ.
Цель: Изучить как втроить SVG (векторное) изображение на вебстраницу.

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

Что такое векторная графика?

В веб-разработке Вы будете сталкиваться с двумя типами изображений - растровым и векторным:

  • Растровое изображение задается сеткой пикселей — файл растрового изображения содержит информацию о расположении и цвете каждого пикселя. Среди популярных форматов изображений данного типа числятся Bitmap (.bmp), PNG (.png), JPEG (.jpg) и GIF (.gif)
  • Векторное изображение  определяется алгоритмом — файл векторного изображения содержит фигуры и правила, по которым компьютер  может вычислить как должно выглядеть изображение, когда выводится на экран.SVG формат позволяет нам создавать векторную графику для использования в веб-документах.

Для демонстрации различий между типами изображений, давайте взглянем на пример. Вы можете найти данный пример на Github как vector-versus-raster.html — в нем демонстрируются два, на первый взгляд, одинаковых изображения, расположенных рядом друг с другом. Каждое из изображений представляет собой красную звезду с тенью. Различие их в том, что левое изображение имеет формат PNG, а правое - SVG.

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

 

Two star images

 

Two star images zoomed in, one crisp and the other blurry

Примечание: Оба изображения сверху имеют формат PNG — слева показано растровое изображение, справа условно показано векторное изображение. Напоминаем, что пример с реальными растровым и веркторным изображениями находится по ссылке: vector-versus-raster.html !

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

Что такое SVG?

SVG это язык на базе XML для описания векторных изображений. По-сути это язык разметки, как и HTML, только содержащий множество различных элементов для определения фигур вашего изображения, а также параметров их отображения. SVG предназначен для разметки графики, а не содержимого. В простейшем случае,  Вы можете использовать элементы для создания простых фигур, таких как <circle>(круг) и <rect>(прямоугольник). Более сложные SVG элементы включают <feColorMatrix> (разложение цвета с использованием матрицы), <animate> (анимация частей Вашего векторного изображения) и <mask> (примение маски к изображению.)

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

<svg version="1.1"
     baseProfile="full"
     width="300" height="200"
     xmlns="http://www.w3.org/2000/svg">
  <rect width="100%" height="100%" fill="black" />
  <circle cx="150" cy="100" r="90" fill="blue" />
</svg>

В результате получается следующее:

Исходя из примера выше, может показаться, что SVG легко создавать вручную. Да, простые SVG можно создавать, используя текстовый редактор, но в случае сложного изображения это становится сложным. Для создания SVG изображений используются редакторы векторной графики, такие как Inkscape или Illustrator. Данные приложения позволяют создавать различные изображения, используя множество графических инструментов, и создавать приближения фотографий (например опция Trace Bitmap feature приложения Inkscape.)

SVG дополнительные преимущества кроме описанных ранее:

  • Текст в векторном изображении текст остается доступным (что также улучшает SEO).
  • SVGs легко поддаются стилизации/программированию (scripting), потому что каждый компонент изображения может быть стилизован с помощью CSS или запрограммирован с помощью JavaScript.

Так почему же тогда вообще используют растровые изображения, а не только SVG? Потому что, SVG имеет ряд недостатков:

  • SVG может очень быстро стать сложным, в том смысле, что размер файла увеличивается; сложные SVG изображения также значительно загружают браузер.
  • SVG может быть сложнее создать нежели растровое изображение, в завичимости от того какого плана изображение необходимо создать.
  • SVG не поддерживаются старыми версиями браузеров, так что могут не подойти, если необходима поддержка старыми версиями Internet Explorer Вашего сайта (SVG поддерживается начиная с IE9.)

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

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

Добавление SVG на страницы

В данном разделе мы рассмотрим различные варианты, с помощью которых можно добавить SVG векторную графику на веб-страницу.

Быстрый путь: <img>

To embed an SVG via an <img> element, you just need to reference it in the src attribute as you'd expect. You will need a height or a width attribute (or both if your SVG has no inherent aspect ratio). If you have not already done so, please read Images in HTML.

<img 
    src="equilateral.svg" 
    alt="triangle with all three sides equal"
    height="87px"
    width="100px" />

Pros

  • Quick, familiar image syntax with built-in text equivalent available in the alt attribute.
  • You can make the image into a hyperlink easily by nesting the <img> inside an <a> element.

Cons

  • You cannot manipulate the image with JavaScript.
  • If you want to control the SVG content with CSS, you must include inline CSS styles in your SVG code. (External stylesheets invoked from the SVG file take no effect.)
  • You cannot restyle the image with CSS pseudoclasses (like :focus).

Troubleshooting and cross-browser support

For browsers that don't support SVG (IE 8 and below, Android 2.3 and below), you could reference a PNG or JPG from your src attribute and use a srcset attribute (which only recent browsers recognize) to reference the SVG. This being the case, only supporting browsers will load the SVG — older browsers will load the PNG instead:

<img src="equilateral.png" alt="triangle with equal sides" srcset="equilateral.svg">

You can also use SVGs as CSS background images, as shown below. In the below code, older browsers will stick with the PNG that they understand, while newer browsers will load the SVG:

background: url("fallback.png") no-repeat center;
background-image: url("image.svg");
background-size: contain;

Like the <img> method described above, inserting SVGs using CSS background images means that the SVG can't be manipulated with JavaScript, and is also subject to the same CSS limitations.

If your SVGs aren't showing up at all, it might be because your server isn't set up properly. If that's the problem, this article will point you in the right direction.

How to include SVG code inside your HTML

You can also open up the SVG file in a text editor, copy the SVG code, and paste it into your HTML document — this is sometimes called putting your SVG inline, or inlining SVG. Make sure your SVG code snippet begins and ends with the <svg></svg> tags (don't include anything outside those.) Here's a very simple example of what you might paste into your document:

<svg width="300" height="200">
    <rect width="100%" height="100%" fill="green" />
</svg>

Pros

  • Putting your SVG inline saves an HTTP request, and therefore can reduce your loading time.
  • You can assign classes and ids to SVG elements and style them with CSS, either within the SVG or wherever you put the CSS style rules for your HTML document. In fact, you can use any SVG presentation attribute as a CSS property.
  • Inlining SVG is the only approach that lets you use CSS interactions (like :focus) and CSS animations on your SVG image (even in your regular stylesheet.)
  • You can make SVG markup into a hyperlink by wrapping it in an <a> element.

Cons

  • This method is only suitable if you're using the SVG in only one place. Duplication makes for resource-intensive maintenance.
  • Extra SVG code increases the size of your HTML file.
  • The browser cannot cache inline SVG as it would cache regular image assets.
  • You may include fallback in a <foreignObject> element, but browsers that support SVG still download any fallback images. You need to weigh whether the extra overhead is really worthwhile, just to support obsolescent browsers.

How to embed an SVG with an <iframe>

You can open SVG images in your browser just like webpages. So embedding an SVG document with an <iframe> is done just like we studied in From <object> to <iframe> — other embedding technologies.

Here's a quick review:

<iframe src="triangle.svg" width="500" height="500" sandbox>
    <img src="triangle.png" alt="Triangle with three unequal sides" />
</iframe>

This is definitely not the best method to choose:

Cons

  • iframes do have a fallback mechanism, as you can see, but browsers only display the fallback if they lack support for iframes altogether.
  • Moreover, unless the SVG and your current webpage have the same origin, you cannot use JavaScript on your main webpage to manipulate the SVG.

Active Learning: Playing with SVG

In this active learning section we'd like you to simply have a go at playing with some SVG for fun. In the Input section below you'll see that we've already provided you with some samples to get you started. You can also go to the SVG Element Reference, find out more details about other toys you can use in SVG, and try those out too. This section is all about practising your research skills, and having some fun.

If you get stuck and can't get your code working, you can always reset it using the Reset button.

Summary

This article has provided you with a quick tour of what vector graphics and SVG are, why they are useful to know about, and how to include SVG inside your webpages. It was never intended to be a full guide to learning SVG, just a pointer so you know what SVG is if you meet it in your travels around the Web. So don't worry if you don't feel like you are an SVG expert yet. We've included some links below that might help you if you wish to go and find out more about how it works.

In the last article of this module we will explore responsive images in detail, looking at the tools HTML has to allow you to make your images work better across different devices.

See also

 

In this module

 

Метки документа и участники

Внесли вклад в эту страницу: mdnwebdocs-bot, vedmibot
Обновлялась последний раз: mdnwebdocs-bot,