Вернуться на предыдущую страницу

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

Содержание:

  1. Полезные ресурсы
  2. Чем редактировать (создать) SVG
  3. Как добавить SVG на сайт?
  4. SVG для background CSS
  5. SVG favicon иконка на сайт

Полезные ресурсы:

SVG для background

SVG W3 спецификации

SVG изображения (а также esp, psd, png)

Чем редактировать (создать) SVG:

Название Создатель Цена
Inscape Inscape без оплаты
Illustrator Adobe Systems $499, $169 upgrade
AutoTrace Martin Weber свободная
Easy Trace Easy Trace Group 1500 €, 750 € upgrade
Freehand Macromedia $399, $99 upgrade
MagicTracer Elgorithms MagicTracer $59
MST Viewer MS Technology Commercial Use Only
PhotoLine Computerinsel GmbH 59 €
Potrace Peter Selinger свободная
R2V Toolkit AlgoLab $99
Ras2Vec Davide Libenzi свободная
Image2XAML Roman Kalachik свободная
Raster to Vector Raster to Vector $99
RasterVect RasterVect $79
RaveGrid RaveGrid свободная для персонального использования
(доступна коммерческая версия)
Scan2CAD Pro Softcover Intn'l $469, $190 upgrade
Silhouette Pro Free Soft S.A. $359
Adobe Streamline Adobe Systems  ?
Vector Magic Vector Magic $7.95/mo, $295/lic, tokens
Vextractor VextraSoft $99
VPHybridCAD softelec $1400
WinTopo Freeware SoftSoft свободная
WiseImage Consistent Software $1400
RasVector Daniel Lu GPL
Xara Xtreme Xara Group Ltd. 79$ Windows версия,
Linux версия свободная
XTrace Ronny Schütz 25$ for Amiga (доступна демоверсия)
VectorNow AutoDWG $120.00
DesignPresentation DesignPresentation Pay Per Use

Как добавить SVG на сайт?

Есть несколько способов.

Важно знать, что для SVG изображений, желательно указывать их размер через свойства width или через стили.

1

<img src="/link_to_svg.svg" width="120px">

2

<img src="/link_to_svg.svg" style="width:120px">

3

<img src="/link_to_svg.svg" class="imgsvg">
<style>
.imgsvg{width:120px}
</style>

1 способ:

Использовать SVG файл, как обычное изображение:

<img src="/image.svg" alt="">

2 способ:

Непосредственно встроить код SVG на страницу:

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>HTML5 страница с SVG</title>
</head>
<body>
<p>Пример страницы с SVG.</p>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"width="400px" height="400px">
<path fill="#5DD7FC" d="M0.5… /> <!—SVG document
</svg>
</body>
</html>

3 способ:

Встроить несколько SVG изображений в SVG файл и использовать ссылки на них в HTML.

Данный способ значительно экономит обращения к серверу и работает по принципу старой-доброй компоновки изображений для background в CSS. Например:

Взаимодействие с ним может показаться сложным для новичков в этой сфере. Но это только на первый взгляд.
Вам всего-лишь необходимо будет выбрать необходимые иконки формата SVG. Открыть их в Иллюстраторе, сохранить их определенным образом и добавить код в файл.
Затем использовать ссылки на эти иконки... Подробнее в видео ниже:

Код ниже для вставки SVG, как мультиконтейнера:

<svg viewBox="0 0 520 520" width="30" height="30">
  <use xlink:href="/sys/b/ic.svg#bus"></use>
</svg>

Сам SVG файл должен иметь следующее содержимое:

<svg xmlns="http://www.w3.org/2000/svg">
 <defs>
<g id="bus">
<path d="M512,128.82V512L384,466.49V83.31Z" style="fill:#66d7ff"/><polygon points="384 83.31 384 466.49 256 512 233.24 320.41 256 128.82 384 83.31" style="fill:#0068ff"/><path d="M256,128.82V512L128,466.49V83.31Z" style="fill:#66d7ff"/><polygon points="128 83.31 128 466.49 0 512 0 128.82 128 83.31" style="fill:#0068ff"/><path d="M435.61,115.61c0,92.57-104.51,178.31-104.51,178.31-6.11,5-16.1,5-22.21,0,0,0-104.51-85.74-104.51-178.31a115.61,115.61,0,1,1,231.22,0Z" style="fill:#fc6600;stroke:#000;stroke-miterlimit:10;stroke-width:6px"/><path d="M320,173.77a58.16,58.16,0,1,1,58.16-58.16A58.16,58.16,0,0,1,320,173.77Z" style="fill:#fff;stroke:#000;stroke-miterlimit:10;stroke-width:6px"/>
</g>
  </defs>
</svg>

SVG для background CSS

SVG для background css на сайт (как фоновая картинка стилей):

Способ раз:

.key { background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='iso-8859-1'?%3E%3C!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 280.062 280.062' style='enable-background:new 0 0 280.062 280.062;' xml:space='preserve'%3E%3Cg%3E%3Cpath style='fill:%23EFC75E;' d='M262.797,219.065c-1.636-1.505-17.773-0.464-17.773-0.464l-0.184-17.073l-7.893-9.022l-18.709-0.306 l-0.018-0.026l0,0c-0.079,0.254-0.009-18.779-0.009-18.779l-8.733-6.327c0,0-16.985-0.499-17.125-0.63l-1.365-17.449 l-15.725-18.613c5.434-11.726,8.567-24.756,8.567-38.539c0-50.711-41.147-91.823-91.901-91.823C41.147,0.004,0,41.116,0,91.827 c0,50.72,41.147,91.84,91.91,91.84c14.08,0,27.373-3.264,39.3-8.926L235.739,279.9c0,0,44.253,0.122,44.253,0.105l0.07-44.664 C280.062,235.341,273.114,228.568,262.797,219.065z M74.374,96.378c-12.032,0-21.781-9.81-21.781-21.912 s9.748-21.921,21.781-21.921s21.79,9.818,21.79,21.921S86.406,96.378,74.374,96.378z'/%3E%3Cpath style='fill:%23CA9F30;' d='M74.391,43.767c-16.915,0-30.628,13.713-30.628,30.628s13.713,30.628,30.628,30.628 c16.924,0,30.628-13.713,30.628-30.628S91.315,43.767,74.391,43.767z M74.391,87.522c-7.246,0-13.126-5.881-13.126-13.126 c0-7.254,5.881-13.126,13.126-13.126c7.246,0,13.126,5.872,13.126,13.126C87.517,81.641,81.637,87.522,74.391,87.522z'/%3E%3Cpath style='fill:%23CA9F30;' d='M152.239,161.011c-8.357,7.281-18.027,13.03-28.624,16.942l103.916,102.096h43.754L152.239,161.011z '/%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E"); }

Способ два:

.element { background-image: url(/images/image.svg); }

SVG favicon иконка на сайт.

Не все догадываются, что можно использовать векторную масштабируемую графику для отображения в качестве иконки для сайта. Но в этом есть подвох. Firfox никак не хочет подружиться на данный момент с иконкой для сайта в формате SVG. Поэтому можно использовать следующий код, в котором для Firefox используется ICO (или другие форматы растровой графики [PNG, JPG]).
А для нормальных браузеров, используется SVG.

<link rel="shortcut icon" href="/favicon.ico">
<link rel="icon" type="image/svg+xml" href="/icon.svg">
<link rel="mask-icon" href="/icon.svg" color="blue">

Естественно, этот код необходимо разместить в <head> страницы

SVG на сайт
Официальный сайт

Файлы SVG на сайт:

Скачать файл 1
DEMO