Как сделать кликабельную карту из файла SVG?
В настоящее время я изучаю Javascript. Я пытаюсь составить кликабельную карту Германии с данными. Такую, как эта.
Amchart предоставляет карту Германии в файле SVG. Но это не похоже на тот пример, что выше. У меня есть некоторые данные по Германии, и я хочу отобразить их в соответствии с регионами, как указано выше. Я знаю, что мне нужно загрузить jquery на html, но не знаю, как это сделать с SVG картой Германии. Свободный перевод вопроса How to make a clickable map from an SVG file? от участника @Doo Hyun Shin.
Отслеживать
Alexandr_TT
задан 27 мар 2020 в 12:07
Alexandr_TT Alexandr_TT
109k 23 23 золотых знака 111 111 серебряных знаков 372 372 бронзовых знака
ассоциация:stackoverflow.com/q/60852724/7394871
27 мар 2020 в 12:17
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
Вы можете легко изменить пример США, который вы цитировали: https://www.amcharts.com/demos/us-heat-map/ для Германии
Самое главное, ссылаться на данные Германии:
Затем измените строку определения карты на:
// Set map definition chart.geodata = window.am4geodata_germanyLow; И установите немецкие данные с немецкими государственными идентификаторами (ID). Вы можете изменить данные на то, что вы хотите:
polygonSeries.data = [ < id: "DE-BB", value: 4447100 >, < id: "DE-BE", value: 626932 >, . ] Полное демо здесь: codepen
// //console.log(window.am4core); //console.log(window.am4geodata_germanyLow); window.am4core.ready(function () < // Themes begin window.am4core.useTheme(am4themes_animated); // Themes end // Create map instance var chart = window.am4core.create("chartdiv", window.am4maps.MapChart); // Set map definition chart.geodata = window.am4geodata_germanyLow; // Set projection //chart.projection = new window.am4maps.projections.Albers(); // Create map polygon series var polygonSeries = chart.series.push(new window.am4maps.MapPolygonSeries()); //Установите min/max fill color для каждой области polygonSeries.heatRules.push(< property: "fill", target: polygonSeries.mapPolygons.template, min: chart.colors.getIndex(1).brighten(1), max: chart.colors.getIndex(1).brighten(-0.3) >); // Заставить карту загружать данные многоугольника (указать формы и имена) из GeoJSON polygonSeries.useGeodata = true; // Установите значения тепловых карт для каждого состояния polygonSeries.data = [ < id: "DE-BB", value: 4447100 >, < id: "DE-BE", value: 626932 >, < id: "DE-BW", value: 5130632 >, < id: "DE-BY", value: 2673400 >, < id: "DE-HB", value: 33871648 >, < id: "DE-HE", value: 4301261 >, < id: "DE-HH", value: 3405565 >, < id: "DE-MV", value: 783600 >, < id: "DE-NI", value: 15982378 >, < id: "DE-NW", value: 8186453 >, < id: "DE-RP", value: 1211537 >, < id: "DE-SH", value: 1293953 >, < id: "DE-SL", value: 12419293 >, < id: "DE-SN", value: 6080485 >, < id: "DE-ST", value: 2926324 >, < id: "DE-TH", value: 2688418 >]; // Установить легенду тепла let heatLegend = chart.createChild(window.am4maps.HeatLegend); heatLegend.series = polygonSeries; heatLegend.align = "right"; heatLegend.valign = "bottom"; heatLegend.width = window.am4core.percent(20); heatLegend.marginRight = window.am4core.percent(4); heatLegend.minValue = 0; heatLegend.maxValue = 40000000; // Настроить пользовательские метки легенды тепловой карты, используя диапазоны осей var minRange = heatLegend.valueAxis.axisRanges.create(); minRange.value = heatLegend.minValue; minRange.label.text = "Little"; var maxRange = heatLegend.valueAxis.axisRanges.create(); maxRange.value = heatLegend.maxValue; maxRange.label.text = "A lot!"; // Вычеркнуть внутренние метки осей значений labels heatLegend.valueAxis.renderer.labels.template.adapter.add("text", function ( labelText ) < return ""; >); // Настроить всплывающую подсказку var polygonTemplate = polygonSeries.mapPolygons.template; polygonTemplate.tooltipText = ": "; polygonTemplate.nonScalingStroke = true; polygonTemplate.strokeWidth = 0.5; // Создать состояние наведения и установить альтернативный цвет заливки var hs = polygonTemplate.states.create("hover"); hs.properties.fill = window.am4core.color("#3c5bdc"); >); // end am4core.ready()Как сделать интерактивную схему на SVG + jQuery
Задачу можно выполнить на основе векторной графики SVG, с помощью тегов и .
Итак, имеем картинку-подложку:
Над ней нужно абсолютно разместить холст и в нем разместить элементы , каждый магазин это отдельный элемент со своими координатами.
Координаты в теге задаются точками x,y разделенные пробелами.
Атрибут data-id=»1″ потребуется для связки полигона c названием магазина.
.scheme < height: 393px; width: 738px; margin: 0 auto; position: relative; >.scheme svg < position: absolute; top: 0px; left: 0px; height: 393px; width: 738px; >.scheme polygon
В итоге получится следующее:
Как сделать интерактивную карту на сайт, без сторонних библиотек. SVG + HTML + CSS + jQuery
В этом видео я показываю, как быстро и просто сделать интерактивную SVG-карту, которая часто используется на сайтах торговых комплексов, на сайтах по продаже квартир и т. д.
На Ютубе зашло, судя по комментам и лайкам (ничего не накручено). Может и тут кому полезно будет.
1.7K постов 16.9K подписчиков
Подписаться Добавить пост
Правила сообщества
Не забывайте поддерживать авторов плюсами!
— Добавлять нетематические посты, последнее решение за модератором
— Рекламировать какую-либо продукцию в виде постов
— Делится любыми интересными историями, связанными с фрилансом 🙂
5 лет назад
Делал недавно интерактивную карту в той же связке, но без использования встраиваемых изображений. В векторном редакторе делается svg c необходимым контуром разделенным на слои (к примеру как в видео контур коровы), затем в html вставляется через тег object и через js обрабатываем как угодно. Хоть hover-ы вешай, хоть стили меняй. Если интересно могу подробней рассказать.
раскрыть ветку
5 лет назад
Без сторонних библиотек + jQuery?
раскрыть ветку
5 лет назад
На Ютубе зашло, судя по комментам и лайкам (ничего не накручено). Может и тут кому полезно будет.
98 лайков за месяц это зашло? Да и комменты сомнительные. Плюс реклама университета, не попадает ли она под запрет сообщества?
5 лет назад
а мне пригодится, спасибо
5 лет назад
Отличное видео, спасибо.
Подписался на ютубе
Был бы благодарен за видео, где пошагово из psd верстка
Похожие посты
1 месяц назад
Неси память
Показать полностью 1
2 месяца назад
Проект за 3000 рублей
з это заказчик, я это я. описание вот прямо так скинули
з — Здравствуйте. Нужно написать проект на джанго (бэкенд). Фронтенд уже есть. Потом нужно задеплоить на удаленный сервер. ТЗ есть. Сможете сделать?
я — Здравствуйте. Дайте тз посмотрю
з — Задание: часть 1-я. Возможности проекта
Вам предстоит поработать с проектом «Фудграм» — сайтом, на котором пользователи будут публиковать рецепты, добавлять чужие рецепты в избранное и подписываться на публикации других авторов. Пользователям сайта также будет доступен сервис «Список покупок». Он позволит создавать список продуктов, которые нужно купить для приготовления выбранных блюд.
У будущего веб-приложения уже есть готовый фронтенд — это одностраничное SPA-приложение, написанное на фреймворке React. Файлы, необходимые для его сборки, хранятся в репозитории foodgram-project-react в папке frontend. Этот репозиторий вы сможете склонировать к себе на компьютер после того, как прочтёте уроки этой темы.
Кроме папки frontend в нём также есть папки backend, infra, data и docs:
В папке infra — заготовка инфраструктуры проекта: конфигурационный файл nginx и docker-compose.yml.
В папке backend лежит только скрытый файл .gitkeep. Он нужен для того, чтобы папка отображалась в Git. Эта папка предназначена для бэкенда сервиса, который вы разработаете с нуля.
В папке data подготовлен список ингредиентов с единицами измерения — это часть данных для БД, с которой вам предстоит работать. Список сохранён в форматах JSON и CSV. Данные из списка нужно будет загрузить в БД.
В папке docs — файлы спецификации API.
Ваша задача как бэкенд-разработчика — написать бэкенд, включая API, для веб-приложения «Фудграм», а также опубликовать это веб-приложение на вашем виртуальном удалённом сервере и сделать его доступным в интернете.
Никаких жёстких рамок по структуре и содержанию кода мы не устанавливаем, однако есть технические условия общего плана, которые должны быть соблюдены.
Как должно работать веб-приложение
Проект состоит из следующих страниц:
главная,
страница рецепта,
страница пользователя,
страница подписок,
избранное,
список покупок,
создание и редактирование рецепта.
Главная
Содержимое главной — список первых шести рецептов, отсортированных по дате публикации «от новых к старым». На этой странице нужно реализовать постраничную пагинацию. Остальные рецепты должны быть доступны на следующих страницах.
Страница рецепта
Здесь — полное описание рецепта. У авторизованных пользователей должна быть возможность добавить рецепт в избранное и список покупок, а также подписаться на автора рецепта.
Страница пользователя
На странице — имя пользователя, все рецепты, опубликованные пользователем и возможность подписаться на пользователя.
Страница подписок
Только у владельца аккаунта должна быть возможность просмотреть свою страницу подписок. Подписаться на публикации могут только авторизованные пользователи.
Сценарий поведения пользователя:
Пользователь переходит на страницу другого пользователя или на страницу рецепта и подписывается на публикации автора кликом по кнопке «Подписаться на автора».
Пользователь переходит на страницу «Мои подписки» и просматривает список рецептов, опубликованных теми авторами, на которых он подписался. Записи сортируются по дате публикации — от новых к старым.
При необходимости пользователь может отказаться от подписки на автора. Тогда ему нужно перейти на страницу автора или на страницу его рецепта и нажать кнопку «Отписаться от автора».
Избранное
Добавлять рецепты в избранное может только авторизованный пользователь. Сам список избранного может просмотреть только его владелец.
Сценарий поведения пользователя:
Пользователь отмечает один или несколько рецептов кликом по кнопке «Добавить в избранное».
Пользователь переходит на страницу «Список избранного» и просматривает свой список избранных рецептов.
При необходимости пользователь может удалить рецепт из избранного.
Список покупок
Работа со списком покупок должна быть доступна только авторизованным пользователям. Доступ к своему списку покупок должен быть только у владельца аккаунта.
Сценарий поведения пользователя:
Пользователь отмечает один или несколько рецептов кликом по кнопке «Добавить в покупки».
Пользователь переходит на страницу «Список покупок», там доступны все добавленные в список рецепты. Пользователь нажимает кнопку «Скачать список» и получает файл с перечнем и количеством необходимых ингредиентов для всех рецептов, сохранённых в «Списке покупок».
При необходимости пользователь может удалить рецепт из списка покупок.
Должна быть возможность скачать список покупок в формате .txt, pdf или любом другом, который вы посчитаете удобным для пользователя.
При скачивании списка покупок ингредиенты в итоговом списке не должны дублироваться; если в двух рецептах есть сахар (в одном рецепте 5 г, в другом — 10 г), то в списке должен быть один пункт: Сахар — 15 г.
В результате список покупок может выглядеть так:
Фарш (баранина и говядина) (г) — 600
Сыр плавленый (г) — 200
Лук репчатый (г) — 50
Картофель (г) — 1000
Молоко (мл) — 250
Яйцо куриное (шт) — 5
Соевый соус (ст. л.) — 8
Сахар (г) — 230
Растительное масло рафинированное (ст. л.) — 2
Соль (по вкусу) — 4
Перец чёрный (щепотка) — 3
Дизайн списка может быть любым, например, вы можете добавить в список шапку и/или подвал с информацией о вашем проекте. Обязательное условие — ингредиенты должны суммироваться.
Создание и редактирование рецепта
Доступ к этой странице должен быть только у авторизованных пользователей. Все поля на ней обязательны для заполнения.
Сценарий поведения пользователя:
Пользователь заполняет все обязательные поля.
Пользователь нажимает кнопку «Создать рецепт».
Также пользователю должна быть доступна возможность отредактировать любой рецепт, который он создал.
Фильтрация по тегам
Тег (от англ. tag, «метка», «бирка», «ярлык») — метка, которая классифицирует данные и помогает облегчить процесс поиска нужной информации в веб-приложении.
При нажатии на название тега должен выводиться список рецептов, отмеченных этим тегом. Фильтрация может проводиться по нескольким тегам в комбинации «или»: если выбрано несколько тегов — в результате должны быть показаны рецепты, которые отмечены хотя бы одним из этих тегов.
При фильтрации на странице пользователя должны фильтроваться только рецепты выбранного пользователя. Такой же принцип должен соблюдаться при фильтрации списка избранного.
Система регистрации и авторизации
В проекте должна быть доступна система регистрации и авторизации пользователей.
Обязательные поля для пользователя:
логин,
пароль,
email,
имя,
фамилия.
Уровни доступа пользователей:
гость (неавторизованный пользователь),
авторизованный пользователь,
администратор.
з — Задание: часть 2-я. «Под капотом» проекта
Какие базовые модели должны быть в проекте
Далее описаны атрибуты базовых моделей проекта. Скорее всего, кроме этих моделей, вам потребуется создать и другие. Какими они будут — вы решите на этапе проектирования архитектуры веб-приложения.
Рецепт
Атрибуты модели:
Автор публикации (пользователь).
Название.
Картинка.
Текстовое описание.
Ингредиенты — продукты для приготовления блюда по рецепту. Множественное поле с выбором из предустановленного списка и с указанием количества и единицы измерения.
Тег. Можно установить несколько тегов на один рецепт.
Время приготовления в минутах.
Все поля обязательны для заполнения.
Тег
Атрибуты модели:
Название.
Цветовой код, например, #49B64E.
Slug.
Все поля обязательны для заполнения и уникальны.
Ингредиент
Данные об ингредиентах должны храниться в нескольких связанных таблицах. На стороне пользователя ингредиент должен содержать следующие атрибуты:
Название.
Количество.
Единицы измерения.
Все поля обязательны для заполнения.
Как должна быть настроена админка
В интерфейс админ-зоны нужно вывести необходимые поля моделей и настроить фильтры:
вывести все модели с возможностью редактирования и удаление записей;
для модели пользователей добавить фильтр списка по email и имени пользователя;
для модели рецептов:
в списке рецептов вывести название и имя автора рецепта;
добавить фильтры по автору, названию рецепта, тегам;
на странице рецепта вывести общее число добавлений этого рецепта в избранное;
для модели ингредиентов:
в список вывести название ингредиента и единицы измерения;
добавить фильтр по названию.
Каким требованиям должна соответствовать инфраструктура проекта
Проект должен использовать базу данных PostgreSQL. Если вы работаете на не очень быстром компьютере — разрабатывайте проект на SQLite, а PostgreSQL подключите позже, при подготовке к деплою.
В Django-проекте должен быть файл requirements.txt со всеми зависимостями.
Проект нужно запустить в трёх контейнерах — nginx, PostgreSQL и Django через docker-compose на вашем удалённом виртуальном сервере (контейнер frontend используется лишь для подготовки файлов). Доступы к этому серверу вы получили в начале изучения модуля «Управление проектом на удалённом сервере».
Образы проекта должны быть запушены на Docker Hub.
Проект должен быть доступен по IP или доменному имени.
Данные должны сохраняться в volumes.
Что ещё должно быть в проекте
Должна обрабатываться ошибка 404.
Веб-приложение должно быть наполнено тестовыми данными: нужно создать несколько пользователей с разным уровнем доступа и хотя бы по одному рецепту от имени каждого пользователя.
з — Это дипломный проект на яндекс практикуме. Я могу дать доступ к аккаунту, чтобы можно было зайти и в удобной форме посмотреть и тз и тд
я — так Сергей, каким бюджетом распологаете?
з — Около 3 тысяч.
Формат SVG
SVG (Scalable Vector Graphics — масштабируемая векторная графика) — графический формат файлов, применяемый в веб-дизайне для векторных изображений.
Описание формата SVG
Вся представленная ниже информация относится к стандарту SVG 1.1, актуальному на момент написания материала.
SVG является стандартизированным расширением языка разметки XML , предназначенным для описания векторной графики преимущественно на веб-ресурсах. SVG-файлы содержат XML-разметку, описывающую векторные изображения, а именно все его детали в виде геометрических примитивов (линий, кругов, прямоугольников и т. д.) с указанием их размеров, координат и другой необходимой информации.
Пример
Рассмотрим следующий пример векторного изображения в формате SVG : На изображении описаны всего 5 геометрических фигур: 2 круга разных диаметров по центру и 3 прямоугольника. «Вес» изображения составляет всего 349 байт. Код файла выглядит следующим обрахом:
SVG-теги
Для описания элементов векторной графики в SVG применяются обусловленные спецификацией XML-теги:
| Тег | Значение |
|---|---|
| svg | Родительский контейнер для изображения. |
| g | Родительский контейнер для отдельных элементов изображения. |
| path | Описывает границы объекта. Атрибут d данного тега содержит информацию о точках, формирующих объект, и их координатах. Фактически, любые объекты в SVG можно описывать с помощью тега path . |
| rect | Служит для описания прямоугольных геометрических фигур. |
| circle | Служит для описания круглых геометрических фигур. |
| ellipse | Описывает геометрические фигуры эллиптической формы. |
| line | Описывает прямые линии. |
| polyline | Описывает границы незамкнутых фигур. |
| polygon | Описывает границы замкнутых фигуры, автоматически замыкая начальную и конечную точки. |
| text | Применяется для отображения текста. |
| tsspan | Применяется для отдельных участков текста внутри тега text . |
| image | Применяется для вставки растровых изображений. |
| use | Применяется для копирования отдельных объектов. |
| symbol | Описывает геометрические объекты для последующего их применения посредством тега use . |
Атрибуты тегов
Для описания свойств объектов векторного изображения в SVG-тегах применяется множество атрибутов. Вот некоторые из них: Width Определяет ширину объекта. Height Определяет высоту объекта. Fill Определяет цвет заливки фигуры. Stroke Определяет цвет обводки фигуры.
Как создать SVG-картинку?
- вручную в текстовом редакторе,
- с помощью векторных графических редакторов,
- через онлайн-сервисы.
Создание вручную
При условии знании языка разметки SVG нарисовать простейшую фигуру в текстовом редакторе не составит труда, хотя более сложные изображения так не делаются.
Чтобы нарисовать красный квадрат с черной обводкой достаточно создать простой текстовый файл, заменить его расширение с .txt на .svg и вставить в него следующий код:
После чего можно открыть файл в браузере и увидеть само изображение:
Графические редакторы
Чтобы нарисовать изображения в формате SVG , вовсе не обязательно знать язык разметки. Популярные редакторы векторной графики (Illustrator, CorelDRAW, InkScape) позволяют создавать и редактировать SVG-картинки, а также экспортировать в SVG другие форматы ( AI , CDR , EPS ).
Естественно, что перечисленные графические редакторы сами генерируют SVG-разметку при сохранении файла, не предоставляя пользователю возможность редактировать код в своём графическом интерфейсе.
SVG-изображения, созданные в графических редакторах, содержат много лишней мета-информации, которую можно удалить вручную для уменьшения размера файла.
Веб-приложения
Для создания, редактирования и сохранения SVG-рисунков также применяются онлайн-инструменты. Их функционал достаточно в сравнении с десктопными графическими редакторами, но для простейших рисунков они применимы:
Method Draw Простой в освоении и приятный глазу редактор, к тому же позволяющий редактировать SVG-код в интерфейсе. SVG Editor Более сложный в освоении редактор с непривычным интерфейсом и ограничениями в доступе.
Как реализовать SVG-анимацию?
Формат SVG предоставляет веб-дизайнерам огромные возможности в реализации статичных и интерактивных анимированных изображений для сайтов.
Все представленные PNG-файлы максимально сжаты и используют всего 16 цветов в палитре, при этом код SVG-файла максимально сокращён, но с использованием GZIP на стороне сервера «вес» будет составлять всего 468 Байт. Можно предположить, что SVG во всех случаях выигрывает у растровых изображений в отношении размера файла, но это не всегда так и за
Здесь можно наблюдать огромную разницу в размере файла между PNG и SVG : почти в 9 раз в пользу PNG , при том, что его размер в пикселях не так уж мал (800×335).
Это можно объяснить огромным количеством геометрических примитивов, описывающих картинку в SVG , в то время как PNG использует только цветные пиксели.
Из всего этого можно сделать следующий вывод:
SVG целесообразно использовать для изображений, не требующих большого количества геометрических объектов для отрисовки.
Оптимизация SVG-кода
Объём SVG-кода можно уменьшить путём оптимизации:
Удаление мета-данных После сохранения в графических редакторах (например, Adobe Illustrator) SVG-код содержит много ненужной информации, удаление которой сократит размер файла и ни как не отразится на изображении. Удаление лишних объектов Изображение может содержать ненужные или скрытые объекты, а также теги, группирующие объекты, удаление которых не сказывается на изображении. Удаление неиспользуемых классов и идентификаторов При редактировании векторных изображений графические редакторы могут добавлять к тегам классы и идентификаторы, в которых не нуждается финальный вариант картинки. Оптимизация атрибутов тегов Частое использование атрибутов можно заменить посредством CSS-свойств: при большом количестве элементов это поможет значительно уменьшить вес SVG . Удаление лишних узлов Каждая точка в векторном изображении отражается на объёме кода: удаление лишних узлов поможет сократить его объём.
Все эти действия можно проделать вручную в текстовом редакторе, но для этого необходимо знание языка разметки SVG . Намного более простым и эффективным вариантом является использование оптимизатора SVGO:
- SVGO на GitHub,
- SVGO на GitHub — описание и возможности на русском,
- SVGOMG — веб-приложение.
Веб-приложение SVGOMG позволяет оптимизировать SVG-картинки онлайн, при этом предоставляя всю необходимую информацию в своём интерфейсе: можно контролировать изменение веса файла в процентном соотношении, изменяя те или иные опции, а также видеть, отражается ли применение настроек на самом изображении:
Сжатие SVG-данных
Как и все текстовые данные, SVG-код может быть сжат алгоритмом GZIP. При активации на сервере алгоритм обеспечивает передачу данных от сервера браузеру в сжатом виде.
Для GZIP-сжатия на сервере должен функционировать модуль mod_deflate . Чтобы указать серверу, что SVG-файлы необходимо сжимать, в файле .htaccess указывается следующий код:
# здесь перечисляются типы данных для сжатия AddOutputFilterByType DEFLATE image/svg+xml # указание на сжатие SVG
Кроме того, для уменьшения общего размера файла можно использовать формат SVGZ , содержащий сжатые данные SVG . Но смысла в этом нет, если применяется серверное GZIP-сжатие данных. Картинки в формате SVGZ можно сохранять в Adobe Illustrator.
Конвертация SVG в другие форматы и обратно
Конвертация растрового изображения в SVG-формат сопровождается трассировкой (векторизацией) и редко используется, а конвертация из SVG в растровый формат применяется намного чаще.
Как конвертировать в SVG?
Невозможно точно конвертировать растровый формат (например, JPG ) в SVG (или другой векторный формат), т. к. это разные виды графики. Но можно произвести трассировку растровой картинки и сохранить её в формате SVG .
Трассировка — процесс векторизации растрового изображения путём образования векторных контуров.
Необходимо понимать, что трассировка не может абсолютно точно преобразовать растровое изображение в векторный формат:
Результат трассировки зависит от многих особенностей исходного растрового изображения:
- контрастности,
- цветовой палитры,
- степени детализации,
- и др.
Трассировка — автоматический процесс создания векторных контуров. Иначе говоря, SVG-код результата трассировки будет содержать неопределённое количество тегов path , и файл на выходе может «весить» несравнимо больше исходного растрового изображения.
Выполнить трассировку растровой картинки ( JPG , PNG , GIF ) и сохранить её в SVG можно посредством Adobe Illustrator.
Как конвертировать из SVG?
Конвертировать SVG в растровый формат ( JPG , PNG , GIF ) можно с помощью векторных графических редакторов (Adobe Illustrator, CorelDRAW) посредством функций экспорта.
Процесс растеризации векторных изображений можно наблюдать в Photoshop или другом редакторе растровых изображений: при открытии векторного файла будет предложено его растрировать в определённом размере, после чего картинку можно сохранить в любом доступном растровом формате.
Преимущества формата SVG
Формат SVG имеет все преимущества векторной графики, а также ряд других преимуществ относительно растровых форматов изображений, применяемых в веб-дизайне:
- Качество детализации не зависит от размера изображения
SVG-картинки не теряют в качестве детализации при увеличении или уменьшении их размера в пикселях. - «Вес» изображения не зависит от его размера
Огромное преимущество перед растровыми форматами: SVG-картинки можно увеличивать или уменьшать во сколько угодно раз, при этом размер файла остаётся неизменным. - Многофункциональная анимация
Возможности анимации SVG-изображений во много раз превосходят возможности GIF-анимации. - CSS для частей изображения
Для любого элемента SVG-картинки могут быть заданы CSS-свойства. - Нет ограничений в глубине цвета
SVG использует все возможности браузеров. - Возможность внедрения растровых изображений в код
В SVG-код можно подключать ссылки на растровые изображения, или внедрять их в виде base64. - Возможность использования текста в картинке
Текст в SVG-изображении может быть преобразован в контуры, но можно использовать его посредством шрифта. - Оптимизация размера файла без потерь
GZIP-сжатие и оптимизация кода может существенно уменьшить вес SVG-картинок без потерь в качестве отрисовки.
Недостатки формата SVG
- Не подходит для реалистичных изображений
Векторная графика не позволяет реализовать реалистичные цветовые переходы. - Размер файла зависит от количества деталей
Сложность картинки пропорциональна количеству геометрических примитивов, а значит и «весу» SVG-изображения.
Рекомендации по применению формата
На основании вышеизложенного материала можно сделать выводы относительно применения векторных SVG-изображений на веб-сайтах:
- применяйте SVG для несложных рисунков и иконок с небольшим количеством деталей,
- применяйте SVG , если требуется статичная или интерактивная анимация рисунков,
- при выборе между SVG и растровым форматом сравнивайте размеры файлов на выходе,
- применяйте CSS и JS для реализации интерактивности SVG-картинок,
- при необходимости применяйте в SVG текст, не преобразуя его в контуры,
- оптимизируйте SVG-код файла на выходе,
- активируйте GZIP-сжатие SVG ,
- не используйте «тяжелые» SVG-файлы.
Часто задаваемые вопросы
Как создать (сохранить) SVG-файл?
Чем открыть файл в формате SVG?
Открыть SVG-файл можно в современных интернет-обозревателей (браузеров) для просмотра, а также в популярных редакторах векторной (CorelDRAW, Illustrator) и растровой (Photoshop) графики для редактирования и конвертации.
Как сохранить (скачать) SVG-изображение с сайта?
Сохранить SVG-файл с сайта можно различными способами в зависимости от того, как он вставлен в HTML.
Чтобы сохранить SVG-картинку, вставленную посредством тега img , нужно кликнуть по ней правой кнопкой мыши в браузере и из появившегося контекстного меню выберите «Сохранить изображение как. » (название пункта может отличаться в зависимости от браузера). Таким же способом можно копировать с сайтов картинки в других форматах.
В иных случаях нужно искать URL SVG-файла в HTML- или CSS-коде, открывать его в новом окне браузера и сохранять, применяя функцию «Сохранить как. ».
Как вставить SVG на сайт?
Как сохранить SVG в Photoshop?
Photoshop не предоставляет возможность сохранения изображений в этом формате. SVG — формат векторной графики. Для сохранения в этом формате применяются соответствующие программы (Illustrator, CorelDRAW).
Как сохранить SVG в Illustrator?
Чтобы сохранить картинку в формате SVG в Illustrator:
- откройте или создайте изображение в программе,
- выберите Файл → Сохранить как. (клавиши Shift + Ctrl + S ),
- в диалоговом окне выберите папку для сохранения, название и тип файла ( SVG ) и нажмите «Сохранить»,
- откроется модальное окно программы Illustrator с параметрами сохранения файла в формате SVG : Информация о настройке отображается в нижней части окна при наведении на название настройки. Настройка «Качество» влияет на количество геометрических объектов в изображении на выходе. По умолчанию всегда выставляйте эту настройку на 1, чтобы бессмысленно не увеличивать размер файла.
- кликните OK для сохранения файла.
Как сжать (уменьшить) размер SVG-файла?
Как конвертировать JPG в SVG?
Как конвертировать SVG в JPEG?
Почему SVG не отображается на сайте?
Как правило, SVG не отображается на сайте из-за ошибок в коде файла или неправильной вставки в HTML-код Вставка SVG на сайт.
Ссылки
Внутренние материалы
Внешние материалы
- SVG
- SVG 1.1 (Second Edition)
- Оптимизация изображений