Как работать с форматом SVG: руководство для начинающих веб-разработчиков
Если вам нужны четкие, адаптивные или анимированные элементы интерфейса, иконки, логотипы, векторные изображения, то лучше всего использовать формат SVG. Ниже мы расскажем об основных преимуществах формата.
Масштабирование изображения с сохранением качества pixel perfect
При использовании формата PNG или растровых изображений разработчики ограничены пикселями. Масштабирование картинки снижает ее качество. Поэтому приходится использовать несколько разных фото для девайсов с разным разрешением экрана.
Изображения в формате SVG сохраняют качество при масштабировании, так как они нарисованы с помощью кода, а не с помощью пикселей.
Сравнение качества растровых и векторных изображений
Возможность модификации
Изображения в формате SVG можно анимировать или стилизовать с помощью CSS. Вы можете изменить цвета, размеры элементов, шрифты и так далее. Элементы векторных изображений можно делать адаптивными.
Небольшой вес файлов
Изображения в формате PNG становятся очень тяжелыми, когда вы используете высокое разрешение. Это негативно влияет на скорость загрузки страницы, что, в свою очередь, может ухудшить результаты сайта в поисковой выдаче.
Файлы в формате JPG чуть легче картинок в PNG, но всё равно они слишком тяжёлые. А изображения SVG представляют собой код, поэтому они весят очень мало. Поэтому смело используйте этот формат для создания иконок, логотипов и других элементов интерфейса.
Доступность
Если SVG-изображения содержат текст, то поисковики могут их индексировать и выдавать в ответ на запросы пользователей. Скринридеры, которые используют слабовидящие и слепые пользователи, тоже поддерживают SVG. Это обеспечивает доступность файлов этого формата для всех посетителей сайта.
Использование SVG: распространенные практики
Векторные изображения долго были непопулярными, так как не все браузеры их поддерживали, но сейчас эта проблема решена. Поэтому формат активно применяется для решения задач веб-разработки. Наиболее популярные кейсы использования представлены ниже.
Логотипы и иконки в SVG
Логотипы и иконки должны сохранять качество на экранах с любым разрешением. Четкость нужна всем элементам интерфейса сайта: от маленькой кнопки до экранной заставки.
Использование SVG обеспечивает разработчикам контроль над каждой линией, формой и элементом изображения. Также формат облегчает позиционирование элемента и позволяет манипулировать его элементами.
Инфографика
Элементы SVG можно динамически обновлять в зависимости от действий пользователей или изменений данных. Поэтому SVG — идеальный вариант для создания интерактивных карт и инфографики.
Визуальные эффекты
С помощью SVG удобно делать разные визуальные эффекты, например, изменения формы элемента или превращение одного элемента в другой. К примеру, можно менять форму букв или трансформировать один логотип в другой.
Анимация
SVG можно использовать для создания CSS-анимации, поэтому фронтенд-разработчикам не придётся изучать дополнительные техники. Также можно воспользоваться SMIL SVG — инструментом анимации векторных изображений. SMIL обеспечивает разработчикам даже больше возможностей, чем обычная CSS-анимация.
Иллюстрации и рисунки
Обычные рисунки и иллюстрации, если они не слишком сложные, легко трансформировать в SVG. Также это практически идеальный формат для скетчей, схем, например, для иллюстраций, схематически показывающих принцип работы какого-то механизма.
Интерфейсы и приложения
SVG используются для создания сложных интерфейсов, которые интегрируются с насыщенными интернет-приложениями (RIA, rich internet application). Благодаря свойствам формата элементы интерфейса получаются лёгкими, при необходимости анимированными и привлекательными.
Далее речь пойдёт о том, как правильно добавлять файлы SVG на сайт с помощью HTML и CSS.
Изучайте вёрстку на Хекслете В рамках профессии «Верстальщик» вы изучите HTML5 и CSS3, научитесь пользоваться Flex, Grid, Sass, Bootstrap. В процессе обучения сверстаете несколько полноценных лендингов и добавите их в портфолио. Базовые курсы в профессии доступны бесплатно.
Тег img
Первый способ — URL изображения можно указать в атрибуте src тега img . В этом случае вы работает с форматом так же, как с картинками jpg, png и так далее.
Это привычный для большинства разработчиков способ работы с изображениями. Одно из преимуществ — возможность дополнительно использовать тег <a> . С его помощью к изображению можно добавить гиперссылку.
Если вы добавляете изображение через тег img , его можно стилизовать с помощью CSS. Но вы не можете манипулировать элементами изображения с помощью JavaScript и внешних стилей. При этом можно использовать CSS инлайн для изменения кода SVG.
Использование SVG в CSS
Изображения в формате SVG можно указывать в свойстве background-image , как фото в других форматах.
Этот способ сохраняет все преимущества векторных изображений, включая высокую четкость на экранах с любым разрешением. Также этот способ позволяет масштабировать, повторять и позиционировать изображения.
Инлайн SVG в HTML
Файл SVG можно открыть в любом текстовом редакторе, скопировать код и добавить его в HTML-разметку страницы. Это называется использованием SVG инлайн.
Такой подход уменьшает количество http-запросов и сокращает время загрузки страницы. В тегах <svg> можно указывать классы и id и использовать их для изменения стилей элемента с помощью CSS.
Использование SVG в формате кода
В SVG-файлах используется основанный на XML язык, который описывает векторные изображения. Как и HTML, это язык разметки. Но код SVG позволяет манипулировать элементами, например, применять к ним эффекты.
Код SVG можно добавлять в HTML-разметку страницы или писать его в отдельных файлах. Ниже пример создания окружности и прямоугольника с помощью SVG.
Рисуем с помощью SVG: круг
Чтобы нарисовать круг, необходимо указать три атрибута:
- Радиус круга — r .
- Позицию центра круга по оси x — cx .
- Позицию центра круга по оси y — cy .
При этом важно, что цвет линии и фона можно указывать инлайн или отдельно.
Круг нарисован с использованием SVG-формата
Рисуем с помощью SVG: прямоугольник
Создание прямоугольников с помощью SVG похоже на рисование окружностей. Достаточно указать координаты центра по осям x и y, а также высоту и ширину для определения размера. Пример кода ниже.
Прямоугольник нарисован с помощью SVG
Рисуем с помощью SVG: линия
Чтобы нарисовать линию, нужно указать координаты по осям x и y двух точек. Также можно указать цвет и толщину линии.
Рисуем с помощью SVG: звезда
С помощью SVG можно рисовать звёзды и другие многоугольники. Для этого достаточно указать координаты точек углов фигуры.
Сложный многоугольник в формате SVG
Рисуем с помощью SVG: пути
С помощью элемента можно рисовать ломаные кривые — это позволяет создавать объекты разной формы. С помощью атрибута d определяется путь или координаты ломаной линии. Команда M используется для абсолютного позиционирования, а m — для относительного. С помощью команды L определяются координаты новой точки.
Вот пример использования path :
А это пример нескольких линий, созданных с помощью path :
Пути (path) в SVG
Рисуем с помощью SVG: кривые
Для рисования кривой линии используется команда C . В примере ниже определяются начало кривой, точки смещения и конец кривой.
С помощью команды S можно объединять кривые и создавать сложные формы.
Читайте также Когда роботы заменят верстальщиков на рынке труда: большая обзорная статья о профессии с комментариями экспертов.
Как работать с текстом с помощью SVG
Формат SVG позволяет работать с текстом. Для этого применяется тег <text> :
Обычный текст создан с помощью SVG
С помощью свойства stroke можно задать цвет шрифта. Позиция текста на странице определяется координатами x и y. В свойствах stroke и fill можно использовать градиенты.
Как управлять свойствами шрифта с помощью SVG
SVG позволяет управлять следующими свойствами шрифта:
- font-family
- font-style
- font-weight
- font-variant
- font-stretch
- font-size
- font-size-adjust
- kerning
- letter-spacing
- word-spacing
- text-decoration
С помощью тега <tspan> можно выбрать одно или несколько слов в тексте и изменить их свойства.
Также SVG позволяет переворачивать текст, менять цвет линии и заполнения букв и выполнять другие трансформации. Ниже пример создания контура текста, написанного справа налево. Последнее определено с помощью свойств direction и unicode-bidi .
С помощью <textPath> можно связывать текст с путями. Это делается с помощью атрибута xlink:href :
Как использовать CSS в SVG
Код CSS можно указывать инлайн в коде SVG:
Также можно писать CSS в отдельных файлах и применять стили к элементам SVG. Например, в SVG можно указать класс.
В CSS можно работать с таким классом:
Адаптированный перевод статьи All you need to know about SVG on the web by Richard Mattka. Мнение автора оригинальной публикации может не совпадать с мнением редакции Хекслета.
Изучайте Bootstrap на Хекслете В Хекслете есть большой трек верстки на Bootstrap, где можно быстро научиться глубокому использованию всех инструментов и возможностей Bootstrap.
Can Photoshop Open SVG Files and What Can You Do with Them?
Although Photoshop is not primarily a vector editor, it does allow you to open SVG files. The versions from 2015 onwards support the vector-based file type and offer options to either preserve the vector paths or rasterize the file.
Note, however, that Photoshop is not highly suited towards editing vector-based graphics. If you want access to a wider range of capabilities, and if you want to make more specific edits to your vector files, then you should consider opening the SVG file in Adobe Illustrator.
In short, you can open the file as a rasterized image by heading to File > Open then selecting the SVG document, before adjusting the Resolution in the window that opens up. To open the SVG file whilst maintaining its state as a vector object, open it by choosing File > Place Embedded or File > Place Linked.
In this article, we will discuss the above methods in more detail by walking you through the following steps:
Table of Contents
Open the SVG as a Rasterised Layer
First, we’ll explore how you can open your SVG document in Photoshop as a single rasterized layer. This means that the vector contents will be converted into bitmap graphics (making any vector objects uneditable and merging the components into a single layer).
1: Select File > Open and Click on the SVG File
To begin with, let’s head along the top of the screen and select File > Open.
Doing so will cause a new window to open in which you can select a document to open in Photoshop. Once you have located your SVG file, you can open it by double-clicking on its thumbnail.
2: Set the Document’s Properties in the Rasterise SVG Format Window
When you specify a file of the SVG format to be opened in Photoshop, the program automatically brings up a new window called the Rasterise SVG Format Window. Here, you can set the properties of the document, such as the dimensions and the resolution.
Within this window, you’ll notice options to edit the Width and Height of the file. We’d recommend that you leave these values as they are, as editing them will alter the dimensions of the image, causing the contents of the file to be distorted.
Beneath these boxes is an option to set the Resolution of the document. Here, type in the number that corresponds to the resolution you want. A higher value will result in a higher quality and a greater file size.
If you are in doubt, a value of around 300 pixels per inch tends to work well.
Once you are happy with the settings in this dialog box, you can go ahead and hit the OK button to confirm the edits and open the file.
And you should notice that the contents of the SVG file now appear in Photoshop! Since the contents have been rasterised, you can no longer edit their vector properties, and any edits you make to the layer will affect the quality of the objects on it.
In addition, any separate layers that may have existed in the original SVG file will have been merged into one.
However, you can still make general edits to the document, such as color adjustments and adding text or other layers. For a more extensive list of edits that you can make to Photoshop files, take a look at our complete guide to Photoshop for beginners, which explains how you can use the program’s many functions to make awesome edits to your images!
Open the SVG File as a Vector-Based Document
Next, let’s take a look at how you can open the SVG file without having to rasterise the contents. This method will preserve the vector paths within the document, meaning that the components remain fully editable in their vector forms.
1: Choose File > Place Embedded or Place Linked from the Menu Bar
To start, simply head over to the Menu Bar at the top of the screen and click on File > Place Embedded.
Alternatively, you can select File > Place Linked, which will yield the same result.
Clicking on these headings will cause a window to open, where you’ll be prompted to select the file you want to open in Photoshop. Locate the SVG file and double-click on it to open it.
And you’ll hopefully see that Photoshop opens the file as a smart object, which is visible in the Layers Window at the bottom right of the screen.
This means that the vector properties of the file remain editable through a process that we will discuss shortly. This method leaves you with a wider range of editing capabilities than the first method we discussed.
2: Edit the Document Within Photoshop
Opening an SVG file in Photoshop gives you access to a whole new range of editing tools which you would not have had access to in vector-based editing programs. Just as if it were a regular image layer, the smart object can be edited in a variety of ways in Photoshop by adding adjustment layers, text layers, and more.
There are some edits for which the smart object will need to be rasterized, such as warping and merging. If you want to make these edits to the layer, you will therefore have to first right-click on the smart object in the Layers Window and select Rasterise Layer. Note that in doing so you will lose the vector properties of the layer’s contents.
For some inspiration regarding what edits you can make to your file, feel free to take a look at this list we have compiled of 50 great Photoshop editing tutorials!
3: Double-Click on the Smart Object to Edit it Within Illustrator
Whilst you can make general edits to the file within Photoshop, if you want to make more specific edits to the vector objects themselves then you can follow a method that opens the smart object in Illustrator, where you can make edits that apply directly to the Photoshop file in real-time.
To do this, simply double-click on the thumbnail of the smart object in the Layers Window.
From the list of programs that appears, select Adobe Illustrator, or any other vector-based editing program of your choice. You will see that the file now opens in the selected program, where you can make edits such as shape adjustments and style changes to the vector objects.
As you make any edits in the external program, the changes will be immediately and automatically applied to the Photoshop file!
And that’s about all there is to know about how to open and edit SVG files in Photoshop! Want to learn more? Then check out this video by Web Design Blog which walks you through another technique that lets you open an SVG file in Photoshop!
Martin is an amateur photographer and digital marketer who has more than 15 years of experience with Adobe Photoshop. Register for his newsletter here and get a FREE Brush Pack!
Есть ли способ открыть / импортировать файл SVG в Photoshop CS2 или CS3?
название говорит само за себя. Есть ли способ открыть / импортировать файл SVG в Photoshop CS2 или CS3? Я нахожусь на Mac OS X, но предпочитаю кросс-платформенные решения. Illustrator может открывать файлы SVG, поэтому мне кажется странным, что Photoshop не может. Я понимаю, что Illustrator основан на векторах, но Photoshop также имеет ограниченные векторные возможности.
9 ответов
вы можете открыть его в Inkscape (это бесплатно,inkscape.org) и экспортировать как PNG оттуда, с размером вы предпочитаете.
Adobe потеряла всякий интерес к SVG, когда они купили Flash. Лучше всего открыть его в Illustrator и преобразовать в нечто другое, что Photoshop может проглотить.
для использования SVG изображений в Photoshop CS3 попробуйте «SVG Kit for Adobe Creative Suite» изsvg.scand.com и это вся история!
да, SVG Kit для Adobe Creative Suite только для Photoshop / Elements составляет $ 100! Adobe CS5 по-прежнему не открывает эти файлы. Лучший вариант сейчас-скачать Inkscape (бесплатно) и экспортировать его в другой формат.
SVG Kit для Adobe Creative Suite имеет бесплатную пробную версию в любом случае, так почему бы не попробовать? Кроме того, он поддерживает CS5.5, CS5, CS4 и CS3, и вам не нужно конвертировать SVG в другие форматы.
вы можете использовать GIMP для открытия и растеризации SVG, а затем Сохранить как PSD. Gimp также может импортировать пути, но я не уверен, как их сохранить, чтобы сохранить векторную графику в photoshop.
Я всегда просто помещаю [ctrl+shft+p] в Illustrator, а затем копирую и вставляю в photoshop как смарт-объект. Его быстрый и грязный, но он работает.
Я знаю, что вы спрашивали о CS2 или CS3, но Photoshop CC 2015.1 теперь поддерживает открытие и импорт статических SVG файлов.
кроме того, GIMP (free и open source) может открывать их. затем вы можете экспортировать его или даже скопировать-вставить как растеризованное разрешение по вашему выбору.
Создание SVG-спрайта вручную
Если у вас небольшой проект, вы не используете (не умеете?) сборщики, то собрать SVG-спрайт можно вручную. Дело это несложное.
Сохраняем SVG-иконки. Для этого в Photoshop можно нажать «ctrl+shift+alt+w» или зайти в меню «Файл», затем выбрать «Экспортировать» и наконец «Экспортировать как…».
В правом верхнем углу открывшегося окна выбираем «SVG» и сохраняем.
Далее создаём файл спрайта, например, «sprite.svg». Открываем его и наши иконки в редакторе.
Удаляем всё лишнее. Информацию в xmlns, ширину, высоту (viewBox оставляем), id, взятый из названия слоя в Photoshop. Стили тоже можно удалить и прописать их в CSS-файле. Получается что-то типа этого:
В sprite.svg создаём тег SVG, дописываем ему display: none.
Внутрь тега SVG переносим код наших иконок.
Каждой иконке задаём id, а тег SVG самой иконки заменяем на тег «symbol».
Всё! Вставляете на страницу SVG удобным для вас способом (из-за display: none отображаться он не будет), в нужном месте, для того чтобы использовать иконку, пишете следующий код: