Svg, scalable vector graphics file (.svg)

Примеры и код команд:

Команда Имя Параметр Описание
M – (absolute)
m – (relative)
moveto (x,y) M – переместить указатель в точку с абсолютными координатами (x,y)
L -(absolute)
l – (relative)
lineto (x,y) L – нарисовать линию от текущей точки к указанной с абсолютными координатами (x,y)
H – absolute)
h -(relative)
horizontal lineto x+ H – нарисовать горизонтальную линию от текущей точки до указанной абсолютной координатой (x)
V -(absolute)
v -(relative)
vertical lineto y+ V – нарисовать вертикальную линию от текущей точки к указанной абсолютной координатой (y)
A -(absolute)
a -(relative)
Elliptical Arc mx,my rx,ry
x-axis-rotation
large-arc-flag sweep-flag x,y
Рисует элиптическую кривую из начальной точки (mx,my) в конечную(x,y). Кривая имеет два радиуса (rx,ry) и два управляющих флага
C -(absolute)
c -(relative)
curveTo (mx,my) (x1,y1) (x2,y2) (x,y) Рисование кубической кривой Безье из начальной точки (mx,my) в конечную (x,y). Кривая имеет две контрольные точки с координатами (x1,y1) и (x2,y2)
S -(absolute)
s -(relative)
shorthand/smooth CurveTo (mx,my) (x2,y2) (x,y) Рисование кубической кривой Безье от текущей точки (mx,my) до заданной (x,y) с одной контрольной точкой (x2,y2)
Q-(absolute)
q-(relative)
quadratic Bezier curve (mx,my) (x1,y1) (x,y) Отрисовка квадратичной кривой Безье от начальной точки (mx,my) до конечной (x,y) с контрольной точкой (x1,y1)
T-(absolute)
t-(relative)
smooth quadratic Bezier Curve ) (x,y) Рисование квадратичной кривой Безье от текущей точки до заданной (x,y). Контрольная точка этой команды представляет собой отражение контрольной точки предыдущей команды.

Все команды, могут быть в верхнем и нижнем регистре. Верхний регистр указывает на то, что последующая координата абсолютная (absolute), а нижний – относительная (relative).

The «svgstore» task

In your project’s Gruntfile, add a section named to the data object passed into .

grunt.initConfig({  svgstore{    options{      prefix 'icon-',      svg{        viewBox '0 0 100 100',        xmlns'http://www.w3.org/2000/svg'}},    your_target{},},});

Type:
Default value:

A string value that is used to prefix each filename to generate the id.

Type:
Default value:

An object that is used to generate attributes for the resulting file.

{  viewBox'0 0 100 100'}

will result in:

Type:
Default value:

Just like but will add attributes to each generated .

Type: or
Default value:

Formatting options for generated code.

default{  options{    formatting {      indent_size 2}}

Type:
Default value:

This will include a demo HTML (named like ) from where you can copy your blocks.

The default template used looks like:

doctype html>html>head>style>svg{width50px;height50px;fillblack!important;}style>head>body>    {{{svg}}}    {{#each icons}}svg>usexlink:href="#{{name}}">svg>    {{/each}}body>html>

Since you can customise this by passing in a that will be compiled via and used as a tempalte. If it is a function this function is expected to take one parameter and return a string.

The data passed to the template looks like this:

{  svg '',  icons     name 'name of an item',    title 'extracted title or name'}

Type: or
Default value:

This option can be used to clean up inline definitions that may jeopardise later CSS-based styles.
When set to true clean up all inline attributes.
Apart from true / false, the value of this property can be an array of inline attributes ( like , , …) you want to remove from the elements in the SVG.

Type:
Default value:

When set to false, no cleanup is performed on the element.

Type:
Default value:

By default, each generated will only automatically have a
attribute set if the original source SVG file for that symbol has a .

When is set to , if the source SVG has no but
it does have a pixel-based and , then the
will be derived using those values instead.

For example, with ,

will result in:

Type:

The function used to generate the ID from the file name. The function receives the file name without the extension as its only argument.

The default implementation:

function(name){var dotPos =name.indexOf('.');if( dotPos >-1){    name =name.substring(, dotPos);}return name;}

Type: or
Default value:

When or a configuration object is passed for each of the symbols another one, with suffixed id generated.
All those additional symbols have the common dimensions and refers to the original symbols with .
Original symbols are placed exactly in the middle of the fixed-size viewBox of the fixed size version.

Configuration reference and default values if is passed:

grunt.initConfig({  svgstore{    options{      fixedSizeVersion{        width50,        height50,        suffix'-fixed-size',        maxDigits{          translation4,          scale4,},},},},});

Any of the configuration object properties may be omitted.

This example will merge all elements from the folder into the -Block of the . You can use that SVG in HTML like:

svg>usexlink:href="#filename">svg>
grunt.initConfig({  svgstore{    options{},    default {      files{'dest/dest.svg''svgs/*.svg',},},},});

Type:
Default value:

Include a element for screen readers. Uses the filename if no was found on the source SVG. Set to only if you are providing your own accessible name in your code.

Type:
Default value:

Preserve element for screen readers if present. Set to to suppress.

Type:
Default value:

Use this option to provide an ID of an SVG element you’d like removed. Likely use case is a bounding box path. Simply add and then supply in the options.

Конвертеры SVG в PNG

Просмотреть файл SVG как обычную картинку можно просто перетащив его на окно браузера, но бывает и так, что SVG-документ необходимо сконвертировать в более доступный и привычный графический формат, скажем, PNG. Если конвертируемых файлов много, есть смысл воспользоваться бесплатной тулзой SVG2PNG, позволяющей преобразовывать SVG в PNG в пакетном режиме. Чтобы конвертировать SVG в PNG, запустите утилиту, перетащите в ее окно векторные файлы, нажмите «Start» и получите результат.

В остальных случаях будет меньше мороки, если воспользуетесь бесплатными конвертерами SVG в PNG, работающими в режиме онлайн. В частности, это svgtopng.com/ru, convertio.co/ru/svg-png и image.online-convert.com/ru/convert-to-png.

Какой из них удобнее, решайте сами. Все эти три конвертера бесплатны и поддерживают работу в пакетном режиме, а Online-Convert вдобавок ко всему еще предоставляет возможность гибкой настройки выходных параметров PNG-файла.

Знакомимся с диалоговым окном сохранения

  • SVG Profiles
    По умолчанию используется SVG 1.1
  • Fonts Type / Convert to outlines — что означает «перевести в кривые», то, что нам и нужно, при этом селект Subsetting становится недоступным для изменения.Type / SVG — Нужен в случае, если в SVG встраивается текстType / Subsetting — Позволяет указать включаемый набор символов с целью дальнейшей возможности редактирования текста в режиме исходного кода и представления его графически при отображении SVG файла.
  • OptionsImage Location / Embed — при наличии растровых изображений позволит включить их в состав SVG файлаImage Location / Link — при наличии растровых изображений положит их рядом с файлом в той же папке, указав в SVG файле ссылку на них. Если в данном случае убрать изображение включаемое, то SVG файл перестанет корректно отображаться.Preserve Illustrator Capabilities — галочка, предполагающая последующую возможность редактирования файла в иллюстраторе
  • More options
    Трогать для решения наших задач необязательно.
  • SVG Code
    Замечательная кнопка, позволяющая просмотреть SVG файл в текстовом формате сразу.

При выбранном Image Location / Embed:

По структуре кода можно даже совершенно не профессиональным взглядом выявить вставки растровой графики.

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

Пример, с 666 строки идет растровая дичь, абсолютное зло в нашем случае:

При выбранном Image Location / Link:

В коде будет менее заметная вставка, например:

Поэтому желательно просматривать именно в режиме Image Location / Embed!

Лучшие редакторы для работы с файлами SVG

Как уже было сказано, отредактировать файл SVG можно в обычном текстовом редакторе, но для этого нужно обладать специфическими знаниями. Гораздо удобнее и правильнее задействовать векторные графические редакторы.

Adobe Illustrator

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

Boxy SVG

Открыть SVG-картинки также можно с помощью специально созданного для работы с этим форматом приложения Boxy SVG. Данный редактор во многом уступает Adobe Illustrator, однако в нём вы найдете все базовые инструменты для создания и редактирования изображений SVG. Приложением поддерживаются работа с фигурами и объектами, импорт шрифтов и картинок популярных форматов, работа с библиотекой Pixabay, просмотр и редактирование исходного кода SVG и CSS. Программа Boxy SVG доступна как онлайн-сервис и как приложение для Windows 10, MacOS и Chrome OS.

Vectr

Чем открыть файл SVG еще? Для работы с файлами этого типа есть программа Vectr, очень даже неплохо справляющаяся с возложенными на неё задачами редактирования. В приложении доступны такие функции, как изменение отдельных частей векторного изображения, работа со слоями, добавление текста и примитивов, применение эффектов (например, прозрачность, обводка, внешняя и внутренняя тень), использование градиентов, пера, линий и других инструментов. Утилита Vectr бесплатна, есть версии для Windows, Linux и Chrome OS.

Inkscape

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

Кстати, изменить цвет SVG можно путем редактирования исходного кода файла, но для этого нужно иметь хотя бы базовые представления о языке CSS и кодах цветов. Отредактировав, к примеру, параметр style в выделенном на скриншоте блоке кода, мы заменили белый цвет на красный. А так, конечно, если чем и редактировать SVG, то Inkscape и подобными ему программами.

Типы файлов SVGZ

Ассоциация основного файла SVGZ

.SVGZ

Формат файла: .svgz
Тип файла: Compressed SVG File

Файл .SGV (Scalable Vector Graphics), сжатые с использованием сжатия GZIP. Он состоит из графических данных в формате XML. Файл совместим с графическими элементами, такими как градиенты, прозрачность, фильтры и анимации.

Создатель: Adobe Systems Incorporated
Категория файла: Файлы векторных изображений
Ключ реестра: HKEY_CLASSES_ROOT\.svgz

Программные обеспечения, открывающие Compressed SVG File:

Adobe Illustrator CC, разработчик — Adobe Systems Incorporated

Совместимый с:

Windows
Mac

Adobe SVG Viewer, разработчик — Adobe Systems Incorporated

Совместимый с:

Windows
Mac
Linux

Позиционирование иконок с помощью ‘viewBox’

Этот способ позиционирования является наиболее простым и понятным. Он может быть использован на практике, если отступы от векторного объекта до краев области просмотра не критичны для вёрстки страницы.

Центрирование по горизонтали.
Возьмем иконку с геометрическими размерами 100×100 px и поместим её в прямоугольную область просмотра ‘viewport’ с шириной width =”200″ и высотой height=”100″ пикселей.

1
2
3

xmlns=»http//www.w3.org/2000/svg»width=»200″height=»100″viewBox=»0100100″

xmlnsxlink=»http//www.w3.org/1999/xlink»

style=»border1pxdottedcrimson;»>

Здесь красная рамка показывает границы ‘viewport’ – области просмотра.
Так как ширина ‘viewport’ – больше в два раза ширины ‘viewBox’ мы ожидаем, что иконка должна растянуться по оси х-ов в два раза.

Но, на самом деле, растягивание изображения до границ ‘viewport’ не происходит, так как не указан атрибут – preserveAspectRatio отвечающий за пропорциональность трансформации. В этом случае его значение по умолчанию равно – preserveAspectRatio=”xMidYMid meet”, что соответствует центрированию изображения по осям “X” и “Y”
Чтобы получить растягивание изображения, как на картинке выше, значение этого параметра должно быть – preserveAspectRatio=”none”.
Далее примеры использования ‘preserveAspectRatio’ для различного позиционирования SVG иконки.

1
2

xmlns=»http//www.w3.org/2000/svg»xmlnsxlink=»http//www.w3.org/1999/xlink»width=»300″height=»100″

viewBox=»0100100″preserveAspectRatio=»xMinYMinmeet» >

1
2

xmlns=»http//www.w3.org/2000/svg»xmlnsxlink=»http//www.w3.org/1999/xlink»width=»300″height=»100″

viewBox=»0100100″preserveAspectRatio=»xMidYMidmeet» >

1
2

xmlns=»http//www.w3.org/2000/svg»xmlnsxlink=»http//www.w3.org/1999/xlink»width=»300″height=»100″

viewBox=»0100100″preserveAspectRatio=»xMaxYMaxmeet» >

Центрирование по вертикали.

Для этого назначим ‘viewport’ высотой 200px и шириной 100px
и атрибут – preserveAspectRatio=”xMidYMid meet”

1
2

xmlns=»http//www.w3.org/2000/svg»xmlnsxlink=»http//www.w3.org/1999/xlink»width=»100″height=»200″

viewBox=»0100100″preserveAspectRatio=»xMidYMidmeet» >

Позиционирование с помощью ‘preserveAspectRatio’ возможно лишь в случае присутствия ‘viewBox’. В противном случае ‘preserveAspectRatio’ – игнорируется.

Резюме файла SVGZ

Эти файлы SVGZ можно просматривать с помощью два существующего (-их) прикладных (-ого) программных (-ого) средств (-а), как правило, Adobe Illustrator CC, разработанного Adobe Systems Incorporated. Оно связано с один основным (-и) типом (-ами) файла (-ов), но часто встречается в формате Compressed SVG File.

Чаще всего файлы SVGZ классифицируют, как Vector Image Files.

Просматривать файлы SVGZ можно с помощью операционных систем Windows, Mac и Linux. Они обычно находятся на настольных компьютерах (и ряде мобильных устройств) и позволяют просматривать и иногда редактировать эти файлы.

Рейтинг популярности файлов SVGZ составляет «Низкий». Это означает, что они не часто встречаются на большинстве устройств.

barcode

Set it up and specify your type and options. The following 3 are the only
required ones.

var svgString =barcode("9234567890128","ean13",{width'50', barWidth1, barHeight50});
svgxmlns="http://www.w3.org/2000/svg"version="1.1"viewBox="0 0 100 50">rectwidth="2.0"height="50"x="0.0"y=""/>rectwidth="3.9"height="50"x="3.9"y=""/>  ...svg>
  • codabar
  • code11 (code 11)
  • code39 (code 39)
  • code93 (code 93)
  • code128 (code 128)
  • ean8 (ean 8)
  • ean13 (ean 13)
  • std25 (standard 2 of 5 — industrial 2 of 5)
  • int25 (interleaved 2 of 5)
  • height of svg (default: 30);
  • width of svg (default: 100);
  • background color css like (default: ‘transparent’);
  • barcode color (default: ‘#000000’);
  • : should show text under bar;

Возможности языка

fill="none" 
stroke="black" d="M 227 239 L 328 90 L 346 250 L 201 124 L 410 150 L 228 238" />
  • Описание основных геометрических фигур (многоугольники, прямоугольники, окружности и т. п.).
  • Широкий спектр визуальных свойств, которые можно применить к фигурам и путям: окраска, прозрачность, скругление углов и т. д.
  • Интерактивность. На каждый отдельный элемент и на целое изображение можно повесить обработчик событий (клик, перемещение, нажатие клавиши и т.д), таким образом, пользователь может управлять рисунком (например — перемещать мышкой некоторые элементы).
  • Анимация и сценарии. С помощью ECMAScript или JavaScript можно описывать даже самые сложные сценарии, связанные с математическими вычислениями координат и пропорций фигур. Вместе с интерактивностью и SMIL анимацией это даёт очень широкие возможности для разработчиков веб-графики.

Что такое SVG файл?

Файл SVG — это графический файл, который использует двумерный векторный графический формат, созданный консорциумом World Wide Web (W3C). Он описывает изображения, используя текстовый формат, основанный на XML. Файлы SVG разрабатываются как стандартный формат для отображения векторной графики в Интернете.

Больше информации

Файл SVG открыт в CorelDRAW Graphics Suite X8

Формат SVG является открытым стандартом, разработанным в рамках W3C (World Wide Web Consortium) , при этом Adobe играет важную роль. Изображения SVG могут быть созданы и экспортированы из программ Adobe Creative Suite, таких как Illustrator и GoLive.

Формат SVG не поддерживается в основном Adobe Photoshop, Photoshop Elements и InDesign. Однако вы можете открывать файлы SVG в этих программах, используя подключаемый модуль SVG Kit для Adobe CS, который разработан Scand.

Более подробную информацию о формате SVG можно найти в Интернете по информации Adobe Scalable Vector Graphics стр.

Программы, которые открывают SVG файлы

Adobe Illustrator

ACD Systems Canvas

CorelDRAW

Corel PaintShop Pro

GIMP

Google Drive

ImageMagick

Adobe Flash

MeshLab

CADSoftTools ABViewer

Adobe InDesign

Adobe Flash Player

Inkscape

Scribus

Microsoft Visio

GIMP

Google Drive

ImageMagick

MeshLab

Adobe Flash Player

Inkscape

Scribus

vhf interservice Cenon

yWorks yEd Graph Editor

Merkaartor

FreeCAD

Synfig Studio

Seavus iMindQ

Adobe Illustrator

GIMP

Google Drive

ImageMagick

Adobe Flash

MeshLab

Adobe InDesign

Blackmagic Design Fusion for Mac

Adobe Flash Player

Inkscape

Scribus

vhf interservice Cenon

Seavus iMindQ

yWorks yEd Graph Editor

Merkaartor

Seavus iMindQ

Правила и команды заполнения путей – fill-rule=”nonzero | evenodd”

Я думаю, что все, кто рисовал в любом векторном редакторе, встречались с эффектом белых, непрокрашенных пятен при заполнении фигур цветом. Это не вызывало больших проблем и легко устранялось дополнительными щелчками мышки по незакрашенным областям рисунка. Но как быть, если нужно написать скрипт, реализующий анимацию с закрашиванием всей фигуры или её отдельных сегментов?
Для этого нужно чётко разобраться в алгоритме заполнения цветом сегментов фигур. Логично предположить, что должны заполняться внутренние области фигуры, а наружные оставаться незакрашенными.
Но как понять, где внутренняя, а где наружная область фигуры, если она имеет сложные контуры с многократными пересечениями линий. Что брать за точку отсчета, относительно чего смотреть?
Ответы на эти вопросы дает команды fill-rule, которая имеет два значения:nonzero | evenodd

fill-rule=”nonzero”
Это правило определяет внутреннию точку на холсте, путем рисования луча от этой точки до бесконечности в любом направлении и затем проверяются места, где сегмент фигуры пересекает луч . Отсчет начинается с нуля. Единица (+1) добавляется каждый раз, когда сегмент пересекает луч слева направо и вычитается единица (-1), когда сегмент пересекает луч справо налево . После подсчета пересечений, если результат равен нулю, то точка считается снаружи пути (сегмент не закрашивается). В противном случае она внутри.
Примечание. Правило действительно только для совокупности нескольких подпутей внутри одного параметра d=”…” команды path.

1
2
3

pathd=»M25,225 25,25 225,25 225,225 25,225
     M75,175 75,75 175,75 175,175 75,175″

style=»strokeblue;fill-rulenonzero;stroke-width2;filldodgerblue;>

Из текста правила “nonzero” становится понятно, что результат заполнения цветом зависит от направления путей, образующие сегменты фигуры и количества их пересечений с лучом.
На Рис.1 два подпути образуют два сегмента, которые пересекают в одинаковом направлении луч, идущий из точки в бесконечность (зеленая линия). Алгебраическая сумма всех пересечений составляет +2, то есть результат не равен нулю, поэтому все сегменты фигуры будут закрашены.

1
2
3

pathd=»M25,225 25,25 225,25 225,225 25,225
     M75,175 175,175 175,75 75,75 75,175″

style=»strokeblue;fill-rulenonzero;stroke-width2;filldodgerblue;>

На Рис.2 пути пересекают в разных направлениях луч, идущий из точки “B”. Их алгебраическая сумма, поэтому равна нулю. Как это не парадоксально, но эта точка считается по определению, снаружи фигуры, поэтому сегмент не закрашивается.

1
2
3
4

pathd=»M25,225 25,25 225,25 225,225 25,225
     M65,185 185,185 185,65 65,65 65,185
     M105,145 105,105 145,105 145,145 105,145″

style=»strokeblue;fill-rulenonzero;stroke-width2;filldodgerblue;>

На Рис.3 имеем три сегмента пересекающие луч в разных направлениях. Посчитаем для каждого сегмента алгебраическую сумму:
A=+1;
B= -1+1=0; – не закрашивается
C=+1-1+1=+1;

Из этих примеров можно вывести две закономерности:

Если используется правило заполнения fill-rule=”nonzero” то:
1. При одинаковом направлении двух и более подпутей параметра d=”…” все сегменты фигуры будут окрашены.
2. При разном направлении двух и более подпутей параметра d=”…” и при условии, что все соседние подпути имеют разные направления,- будут окрашены все нечетные сегменты. Соответственно чётные будут неокрашены.

4б. Смещение начала координат viewBox по двум осям

Теперь переместим начало координат по двум осям сразу в точку (70,70):viewBox=”70px, 70px, 400px, 400px”. Для наглядности добавим внизу еще один красный прямоугольник – (6). см.Рис.4

1 rectx=»160″y=»390″width=»100″height=»100″fill=»rgba(244,47,39, 0.6)»stroke=»rgba(244,47,39, 0.75)»stroke-width=»2″>

После переноса начала координат в область видимости viewBox попадает прямоугольный (400×400)px фрагмент SVG документа с отсчетом ширины и высоты от начала координат (70,70). Происходит захват изображения. Далее начало координат viewBox (70,70) совмещается с началом координат viewport (0,0). Координаты фигур пересчитываются.

Рис.4

Поэтому становятся полностью видны красные прямоугольники 5 и 6. Всё, что не попадает в эту область, отсекается. Например, часть площадей цветных окружностей 1,2 и 4.

Рис.5

Другими словами, перемещая начало координат viewBox вправо и вниз на 70px, в итоге получаем перемещение фрагмента документа SVG в области просмотра viewport влево и вверх.View demo

Атрибут stroke-linecap

Этот атрибут обеспечивает внешний вид концов линий см.Рис.7. Еще для примера, см.Рис.3, где можно улучшить внешний вид линий, сделав их концы круглыми, используя stroke-linecap=”round” см.Рис.8.

1
2
3
4
5
6
7
8
9
10

textx=»50″y=»60″style=»font-family: Arial; font-size: 14px; stroke:orange; «>stroke-linecapsquaretext>

line x1=»60″y1=»80″x2=»180″y2=»80″style=»stroke-linecap: square; stroke: black; stroke-width:15px;»>
textx=»50″y=»105″style=»font-family: Arial; font-size: 14px; stroke:orange; «>stroke-linecaproundtext>
line x1=»60″y1=»120″x2=»180″y2=»120″style=»stroke-linecap: round; stroke: black; stroke-width:15px;»>

textx=»50″y=»145″style=»font-family: Arial; font-size: 14px; stroke:orange; «>stroke-linecapbutttext>
line x1=»60″y1=»160″x2=»180″y2=»160″style=»stroke-linecap: butt; stroke: black; stroke-width:15px;»>

!—направляющиелинии—>

line x1=»60″y1=»40″x2=»60″y2=»200″style=»stroke-linecap: square; stroke: red; stroke-width:1px;»>
line x1=»180″y1=»40″x2=»180″y2=»200″style=»stroke-linecap: square; stroke: red; stroke-width:1px;»>

Рис.7Рис.8

Примеры анимации линии ⇛следующая: SVG polyline ⇛

The JavaScript Implementation

Currently, the only way to have flexibly sized SVG elements that respect their aspect ratio is with JavaScript, using one or more of the following techniques:

  1. Know the aspect ratio of each your SVG elements ahead of time, and resize their height accordingly.
  2. Calculate the aspect ratio of your SVG elements based on an initial rendering (e.g., if JavaScript determines the ideal size of your SVG’s contents).
  3. Add a window event handler that resizes your SVG elements each time the window’s width changes. (Don’t forget to do it once when the window loads, and whenever new SVG elements are added to the document.)
  4. Trust that your MVC framework of choice will Do the Right Thing for you.

The Script

The svg-autosize.js script included here implements the proposed algorithm and provides some useful global functions that you can call in the standards-compliant browser of your choice to enable the proposed behavior:

svgAutosize( element )

Apply the aspect ratio resizing algorithm to an SVG element by reference.

svgAutosize.all( selector )

Apply the aspect ratio resizing algorithm to all SVG elements matching CSS selector.

svgAutosize.always( )

Call svgAutosize.all( ) once, then add window and event listeners to call it again when the document loads and when the window is resized.

Использование ‘symbol’ из внешнего файла SVG

Технология такая – все иконки собираются в одном файле-шаблоне, при этом код каждой иконки упаковывается в свой отдельный символ с присвоением ему уникального идентификатора.
С помощью изменения параметров ‘viewBox’ов в шапке SVG файла и в ‘symbol’ масштабируется размер иконок. Ниже пример файла-шаблона. Этот способ удобен прежде всего тем, что прописав один раз уникальные идентификаторы по всему многостраничному проекту, в случае необходимости не нужно править везде. Иконки можно заменять, редактировать, изменяя код файла шаблона. Полная аналогия с CSS.

1
2
3

5
6
7
8

10
11

13
14

16
17
18
19

svg xmlns=»http://www.w3.org/2000/svg»xmlnsxlink=»http://www.w3.org/1999/xlink»version=»1″

width=»450″height=»450″viewBox=»0 0 1100 1100″>

title>icon window-domaintitle>

desc>below codeicons-«window-domain»desc>

pathd=….>

symbol>

title>icon internet-speedtitle>

desc>below codeicons-«internet-speed»desc>

symbol>

symbolid=»secure-ssl»viewBox=»0 0 3300 3300″>

desc>below codeicons-«secure-ssl»desc>

pathd=….>

symbol>

svg>

Теперь остается только вызвать и разместить иконки внутри контейнера, роль которого выполняет ‘viewport’ – пользовательская область просмотра. В нашем случае это прямоугольник 450х450 пикселей.

1
2
3
4
5
6
7

svg xmlns=»http://www.w3.org/2000/svg»xmlnsxlink=»http://www.w3.org/1999/xlink»version=»1″width=»450″height=»450″viewBox=»0 0 1100 1100″xmlspace=»preserve»>

rectx=»0″y=»0″width=»1100″height=»1100″fill=»#A8E2DB»>

use  xlinkhref=»symbol-sbor.svg#internet-speed»>

usex=»350″y=»350″xlinkhref=»symbol-sbor.svg#secure-ssl»>

usex=»700″y=»700″xlinkhref=»symbol-sbor.svg#window-domain»>

 
svg>

Команда вызова иконки – название файла.svg#имя уникального ‘symbol’.

1 usex=»700″y=»700″xlinkhref=»symbol-sbor.svg#window-domain»>

Все *.svg файлы необходимо разместить в одной директории, так как некоторые браузеры иногда не срабатывают.
На локальном компьютере в режиме оффлайн команда вызова иконок из внешнего файла работает только в Firefox.
В онлайн режиме и в Денвере все современные браузеры работают нормально.

Ссылка на основную публикацию