Что такое SVG

SVG (от англ. Scalable Vector Graphics — масштабируемая векторная графика) — один из видов графики, которые формируются с помощью геометрических объектов: линий, окружностей, прямоугольников, кривых и других элементов.

Сочетание таких деталей позволяет создать практически любой образ. Например, это может быть иконка социальной сети Instagram:

Толчок к развитию этого языка разметки впервые дал Консорциум World Wide Web, который в 1999 году был более известен как W3C. W3C также предоставил концепцию SVG — языка разметки для создания двумерных графических интерфейсов и изображений.

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

Как использовать SVG на странице

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

Например, мы можем поместить любой заголовок на страницу, а затем нарисовать пару зеленых кружков и красную линию прямо поверх него:

Теперь давайте узнаем, как мы это сделали и что для этого нужно.

Линия

Линия — самый простой элемент в графике SVG. Чтобы нарисовать линию, нам нужно знать:

• начальные и конечные координаты,
• толщина линии,
• и ее цвет.

Тег используется для строки

Давайте сложим все вместе:

Теперь давайте завернем эту команду в тег

Круг

Для окружности используется команда, где мы должны указать:

• центр круга,
• радиус,
• цвет заливки,
• толщина контура,
• цвет контура.

Чтобы нарисовать зеленый круг жирной фиолетовой линией, установите следующие параметры:

Давайте соберем это вместе, добавим новый круг и также поместим это внутрь тега :

Прямоугольник

С прямоугольниками тоже все просто — указываем размеры, цвет заливки, а также цвет и толщину контура:

Недостаток стандартного прямоугольника в том, что он всегда рисуется из точки с координатами (0,0). Если прямоугольник нужен в другом месте, используется многоугольник.

Многоугольник

Многоугольник — это форма, которая выглядит следующим образом:

1. Задаем любое количество точек с координатами.
2. Линии проходят через эти точки по порядку, причем последняя точка соединяется с первой.
3. То, что получилось в границах линий, закрашивается выбранным цветом.

Например, вот что нужно, чтобы нарисовать синий треугольник:

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

Продвинутый уровень

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

Привет, это журнал Код!

Особенность SVG-формата

неделя знакомства с дизайнерскими профессиями
ИСКРА — бесплатная ИСКРА —
неделя знакомства с дизайнерскими профессиями

Выберите профессию дизайнера, необходимую в IT.

зажечь искру

Основное отличие SVG от других векторных форматов заключается в том, что он широко используется в дизайне веб-сайтов и мобильных приложений благодаря небольшому размеру файлов и возможности настройки. Его можно редактировать не только в графическом редакторе, но и с помощью HTML и CSS прямо на сайте. Поэтому иконки и полноценные иллюстрации для веба очень часто создаются в векторном формате SVG.
Простые SVG-иконки на праздничную тематику от Unblast. Неделя открытия профессий в области дизайна исходного кода
ИСКРА — бесплатная ИСКРА —
неделя знакомства с дизайнерскими профессиями

Выберите профессию дизайнера, необходимую в IT.

Читайте также: Загрузочная флешка с Windows 7 за 10 мин

Достоинства SVG

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

Еще одна особенность SVG — настройка. Предположим, нам нужно загрузить на сайт красную иконку, а у нас под рукой только черная. Если это растровое изображение JPG или PNG, потребуется много усилий, чтобы изменить цвет значка. В случае с SVG достаточно открыть графический редактор, поддерживающий векторные изображения, например Figma, и изменить цвет значка одним кликом. Это похоже на изменение цвета одного элемента.

Также SVG-изображение можно открыть в HTML и CSS, а это значит, что мы можем напрямую изменить как сам объект, так и его цвет через код.

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

Недостатки SVG

Таким образом, у SVG нет недостатков, но есть несколько моментов, о которых вам следует знать:

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

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

Как подключить SVG к HTML-странице

В первую очередь стоит отметить, что SVG по внешнему виду часто напоминает полноценную HTML-страницу, снабженную собственными стилями, а иногда и скриптами. Именно из этого следует исходить при выборе способа «прикрепления» изображения к коду.

Самый простой способ — использовать тег
. Подходит, если это статичное сохраненное изображение. Нужно понимать, что никакие скрипты или анимации в данном случае применяться не будут. Этот способ прикрепления изображения является самым простым и требует лишь небольшого знания HTML-разметки. Код будет выглядеть примерно так:

Таким способом удобно прикреплять простые элементы: схемы, графики, логотипы, простые иллюстрации, если они не требуют интерактивности.
Сложные иконки SVG от Premast и Yassmin Moghazy. Источник

Для «оживления» изображения, то есть использования необходимой анимации, используется команда.Стоит отметить, что интерактив будет работать только в том случае, если он прописан в самом SVG-файле. Код в этом случае будет выглядеть так:

Как менять цвет SVG-иконки через CSS?

Это очень популярный вопрос среди начинающих и верстальщиков по работе с форматом SVG.

Делается это через достаточно длинный код, поэтому для больших изображений имеет смысл включать CSS. Если изображение маленькое, даже оно будет выглядеть примерно так:

2.532х2.624с.7480 1.127-.368.909-1.094-.499-1.527-3.871-4.668-4.023-4.878з

0-2 922-.151-3 198 686-3 198 388 0 1 056 192 2 616 1 667 1 783 1 749 2 076 2 532 3 074

0 682 892 4 073 4 148 8 553 2,17 3 058 5 226 4 715 8 006 4 715 1 671 0 1 875–0,368 1 875–1 001

0-3.057-3.211-4.34-6.886-.259-.713-.512-1.001-1.185-1.001h-2.625c-.749 0-.9.345-.9.731

0-.668.306-.668.591 0.622.945.765 1.043 2.515v3.797c0 .832-.151.985-.486.985-.892

xmlns=»http://www.w3.org/1000/SVG»>

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

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

Базовые формы SVG

Каждый файл SVG может состоять из таких элементов, как:

• простая линия;
• ломаная линия;
• прямоугольник;
• круг;
• эллипс;
• полигон.

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

Просмотр файлов SVG в веб-браузере

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

Помимо всемирной паутины, ваш браузер подходит в качестве автономного средства просмотра SVG на вашем устройстве. Браузер распознает SVG как файл XML, поэтому этот формат автоматически откроется там.

1 способ, как открыть файл SVG в браузере:

1. Найдите файл SVG на своем компьютере. Файл может отображаться со значком браузера по умолчанию на вашем ПК или может быть просто пустым.
2. Щелкните файл правой кнопкой мыши, в контекстном меню сначала выберите «Открыть с помощью», а затем выберите один из предложенных браузеров, установленных на вашем компьютере.

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

2 пути:

Просто перетащите SVG-файл в окно браузера, чтобы просмотреть это изображение в браузере (Google Chrome, Яндекс.Браузер, Microsoft Edge, Mozilla Firefox, Opera, Vivaldi и т д).

Как открыть SVG-файл

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

Далее рассмотрим список этих программ и принцип взаимодействия с ними.

Вариант 1: GIMP

Расширенный бесплатный графический редактор. Может открывать SVG и другие «редкие» форматы. Вы также можете вносить и сохранять изменения в этом формате изображения в нем.

Процесс открытия файлов SVG через графический редактор GIMP выглядит следующим образом:

1. В верхнем меню программы воспользуйтесь кнопкой «Файл». В появившемся контекстном меню выберите «Открыть». Вы также можете использовать сочетание клавиш Ctrl+O, универсальное для открытия файлов в большинстве программ.
2. Откроется оболочка GIMP для выбора файла для дальнейшей работы. Там во встроенном файловом менеджере выберите папку, в которой находится файл для открытия.
3. Выберите сам файл SVG и нажмите «Открыть». Обратите внимание, что вы можете выбрать несколько файлов. Они открываются в разных рабочих окнах программы.
4. Перед открытием откроется окно «Создать масштабируемую векторную графику». Необходимо внести небольшие изменения на этапе открытия — настройка масштабирования, изменение размера, разрешения и т.д. Здесь ничего менять нельзя и нажать «ОК”.

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

Вариант 2: Adobe Illustrator

Также продвинутый графический редактор, предназначенный только для создания и редактирования векторной графики. Он также поддерживает изображения SVG. Однако, в отличие от предыдущей версии, она распространяется исключительно на платной основе.

1. откройте иллюстратор. В верхнем меню нажмите кнопку «Файл» и выберите в контекстном меню пункт «Открыть» или используйте универсальную горячую клавишу Ctrl+O.
2. Здесь, в отличие от GIMP, открывается стандартный проводник Windows. В нем перейдите в папку с SVG-изображением. Выберите нужное изображение и нажмите «Открыть». Здесь вы также можете выбрать несколько изображений, которые будут открываться одновременно. Для этого зажмите клавишу Ctrl и нажмите на нужное изображение.
3. Перед открытием SVG-изображения вы увидите сообщение об отсутствии встроенного RGB-профиля. В нем можно назначить профиль RGB с помощью предложенных программой вариантов или оставить без изменений (опция выбрана по умолчанию). Нажмите «ОК», чтобы открыть.

Изображения, выбранные на шаге 2, появятся в рабочей области Adobe Illustrator.

Вариант 3: Google Chrome

Изображения SVG легко открываются во многих браузерах. Мы рассмотрим процесс открытия этого файла в самом популярном браузере — Google Chrome:

1. В отличие от ранее рассмотренных программ, в контекстном меню нет кнопки «Файл» и пункта «Открыть», поэтому приходится пользоваться универсальной комбинацией клавиш — Ctrl+O.
2. Запустится стандартный проводник Windows. В нем перейдите в папку с SVG-изображением. Выберите нужное изображение и нажмите «Открыть». Здесь вы также можете выбрать несколько изображений, которые будут открываться одновременно. Для этого зажмите клавишу Ctrl и нажмите на нужное изображение.

Выбранные изображения автоматически откроются в режиме просмотра в новых вкладках браузера. В большинстве других браузеров: Яндекс.Браузер, Opera, Mozilla Firefox, Vivaldi и так далее процесс открытия выглядит точно так же, как в Google Chrome. Кстати, они также поддерживают работу с SVG в режиме отображения.

Вариант 4: OpenOffice Draw

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

Процесс открытия файла SVG выглядит так:

1. Запустите сам OpenOffice. Появится окно приветствия, в котором вы можете создать новый документ или открыть файл. В нашем случае нужно выбрать пункт «Открыть» в главном меню.
2. Запустится стандартный проводник Windows. В нем перейдите в папку с SVG-изображением. Выберите нужное изображение и нажмите «Открыть». Можно выбрать несколько файлов одновременно, чтобы открыть их.

По умолчанию OpenOffice открывает выбранное изображение SVG в программе Draw.

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

Вариант 5: LibreOffice Draw

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

Также читайте:
откройте CFG-файл
откройте файл .pptx
Конвертировать файл XPS в PDF онлайн
Конвертировать файл APE в MP3

Процесс открытия файла SVG в этом случае происходит по следующей инструкции:

1. Запустите программу запуска LibreOffice. Выберите Открыть в меню слева. Вы также можете вызвать интерфейс открытия через меню «Файл» или с помощью сочетания клавиш Ctrl+O.
2. Запустится стандартный проводник Windows. В нем перейдите в папку с SVG-изображением. Выберите нужное изображение и нажмите «Открыть». Можно выбрать несколько файлов одновременно, чтобы открыть их.

Ваше изображение SVG откроется в интерфейсе Draw. Вместо того, чтобы следовать инструкциям, описанным в статье, вы можете просто перетащить нужный файл в окно OpenOffice прямо из «Проводника». Программа также откроет его корректно.

Вариант 6: XnView

XnView — универсальный просмотрщик изображений. Встроенная функциональность позволяет легко просматривать содержимое файлов SVG. Это платная программа, но ее можно использовать и бесплатно. Процесс открытия файлов SVG с его помощью выглядит следующим образом:

1. Запустите программу XnView. Там в верхнем меню воспользуйтесь кнопкой «Файл». В контекстном меню выберите пункт «Открыть» или воспользуйтесь универсальной горячей клавишей Ctrl+O.
2. Откроется файловый менеджер программного обеспечения. В нем перейдите в папку с SVG-изображением. Выберите нужное изображение и нажмите «Открыть». Можно выбрать несколько файлов одновременно, чтобы открыть их.

Выбранный файл SVG открывается в режиме просмотра в интерфейсе XnView.

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

1. С левой стороны XnView находится меню, в котором можно переключаться между основными частями ПК. Откройте раздел, содержащий файл SVG для просмотра. Обычно это раздел «Компьютер”.
2. Теперь в центральной части интерфейса перейдите в папку, где находится файл SVG.
3. Нажмите на миниатюру фактического файла и выберите «Предварительный просмотр» в нижней части окна.

Чуть ниже выбранное изображение SVG открывается в режиме предварительного просмотра.

Вариант 7: IrfanView

Это еще один универсальный просмотрщик файлов. В отличие от ранее обсуждавшегося здесь варианта, в некоторых версиях подключаемый модуль CAD Image DLL не может быть предварительно установлен. Чтобы избежать возможных проблем в будущем, рассмотрим, как установить указанный плагин в IrfanView:

1. Скачайте плагин CAD Image DLL с официального сайта разработчика.
2. Перейдите в корневую папку IrfanView. Если вы не знаете, как это сделать, щелкните правой кнопкой мыши ярлык программы и выберите параметр «Показать расположение файла». Windows автоматически откроет корневую папку программы.
3. Здесь найдите и перейдите в папку «Плагины». Перетащите туда загруженный ранее файл CADImage.dll. На этом установка плагина в IrfanView завершена.
4. Теперь перейдите в интерфейс самой программы, чтобы открыть SVG-изображение.
5. В верхнем меню нажмите кнопку в виде папки со стрелкой или используйте клавишу O (английская раскладка). В данной программе этот ключ отвечает за открытие новых файлов.
6. Откроется файловый менеджер программного обеспечения. В нем перейдите в папку с SVG-изображением. Выберите нужное изображение и нажмите «Открыть». Можно выбрать несколько файлов одновременно, чтобы открыть их.

После проделанных манипуляций файл SVG нужно открыть в интерфейсе IrfanView. Вместо того, чтобы следовать инструкциям, описанным в статье, вы можете просто перетащить нужный файл в окно OpenOffice прямо из «Проводника». Программа также откроет его корректно.

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

Формат SVG в Inkscape

Inkscape — бесплатный редактор векторной графики. В программе можно просматривать и редактировать файлы SVG, а также конвертировать их в другие графические форматы.

Сделайте следующее:

1. В главном окне Inkscape перейдите в меню «Файл».
2. Нажмите «Открыть…».
3. В окне «Выберите файл для открытия» откройте изображение SVG.

Поддержка браузерами

Формат SVG поддерживается всеми современными браузерами, кроме Internet Explorer 8. Но это можно исправить с помощью JavaScript-библиотеки Raphael.js. Вы можете преобразовать файл SVG в формат этой библиотеки на веб-сайте ReadySetRaphael.