SVG – это векторные изображения, которые уже сегодня можно разместить на Вашем проекте и использовать в качестве фоновых или основных изображений для сайта, иконок, анимированных элементов, подсказок, и многого другого. В данной статье рассматриваются различные способы подключения SVG файлов на Ваш сайт, оптимизация этих файлов, а также экспорт из Adobe Illustrator.
Содержание:
- Полезные ресурсы
- Чем редактировать (создать) SVG
- Как добавить SVG на сайт?
- SVG для background CSS
- SVG favicon иконка на сайт
Полезные ресурсы:
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> страницы
