Как правильно сохранить svg в illustrator

Как правильно сохранить svg в illustrator

Узнайте, как с форматом SVG можно использовать XML и JavaScript для создания веб-графики, отвечающей на действия пользователя такими сложными эффектами, как подсветка, всплывающие подсказки, звуки, анимация и т. п.

О формате SVG

SVG — векторный формат, описывающий изображения в виде фигур, линий, текста и фильтров. Сохраняемые файлы невелики по размеру и обеспечивают высокое качество изображений в Интернете, на печати и даже на портативных устройствах с ограниченными ресурсами в отличие от форматов GIF, JPEG, WBMP и PNG, которые занимают много места. Пользователи могут увеличить изображение SVG на экране без потери резкости, деталей или четкости. Кроме того, формат SVG отлично передает текст и цвет, и пользователи всегда видят изображения таким, как оно выглядит в монтажной области Illustrator.

Формат SVG полностью основан на XML и дает много преимуществ разработчикам и пользователям.

Сохранить объект в формате SVG можно с помощью команд Сохранить , Сохранить как , Сохранить копию и Сохранить для Web и устройств . Для доступа к полному набору параметров экспорта в формате SVG используйте команды Сохранить , Сохранить как и Сохранить копию . Команда Сохранить для Web и устройств предоставляет ограниченный набор экспорта в формате SVG (только те, которые используются для работы в Интернете).

Применение эффектов SVG

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

Illustrator предоставляет набор эффектов SVG по умолчанию. Можно использовать эффекты с их свойствами по умолчанию, отредактировать код XML для создания пользовательских эффектов или написать код для новых эффектов SVG.

Как правильно сохранить svg в illustrator

1. откройте или создайте изображение в программе,
2. выберите Файл → Сохранить как. (клавиши Shift + Ctrl + S ),
3. в диалоговом окне выберите папку для сохранения, название и тип файла ( SVG ) и нажмите «Сохранить»,
4. откроется модальное окно программы Illustrator с параметрами сохранения файла в формате SVG :

Как конвертировать JPG в SVG?

Как конвертировать SVG в JPEG?

How to Export an SVG for web using Adobe Illustrator

SVGs are the future. Get vectorized! Small size. Process of exporting SVG hYAh.

Step 1. Open the source vector file in Adobe Illustrator

.ai, .eps, and .pdf are all valid file formats for vector source files.

Step 2. File > Document Setup

• Click on Edit Artboards
• Specify the W and H dimensions of the artboard to fit the design
• Scale the vector artwork to fit the newly sized artboard

Step 3. Select all and Object > Path > Outline Stroke

Step 4. File > Export…

Make sure use “Use Artboards” is checked.

Step 5.Click “Export”

• Select Format: SVG (svg)

Use the following settings:

• Styling: Internal CSS
• Font: Convert To Outline
• Images: Preserve
• Decimal: 4
• Minify: Checked
• Responsive: Unchecked

*BONUS STEP* (for improved legacy browser compatibility)

Open the generated .svg file and add the following XML attribute to the SVG tag:
preserveAspectRatio=»xMidYMid meet»

Resources

• http://tutorials.jenkov.com/svg/svg-viewport-view-box.html
• Description of values:
  meet – Preserves aspect ratio and scales view box to fit within viewport.
  slice – Preserves aspect ratio and slices off any part of the image that does not fit inside the viewport.
  none – Does not preserve aspect ratio. Scales image to fit view box fully into viewport. Proportions will be distorted.

• Facebook
• Twitter
• LinkedIn

Recent Posts

• How to take a screenshot in Chrome, Firefox, Safari, and Edge
• How to clear your browser cache
• Upgrade WordPress Search with Elasticsearch
• A Philosophical Appeal to Globally Embrace GDPR
• How to Export an SVG for web using Adobe Illustrator

WEBDOGS

WordPress Design & Development in
San Jose, Silicon Valley, and Beyond

Accessibility Privacy Policy Copyright © 2012 — 2022 WEBDOGS LLC. All rights reserved.

Изображение также прикреплено для справки

Как правильно сохранить svg в illustrator

Как правильно сохранить SVG, так, чтобы использование векторного изображения на сайте оправдывало себя не только с эстетической стороны, но и было практичным, в отношении веса изображения?

В чем работать с векторной графикой?

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

Подробонее про графические пакеты и js-библиотеки:

Чем симпатичен SVG?

При целевом использовании SVG позволяет:

• минимизировать размер файла с изображением логотипа / иконки / иллюстрации;
• разместить элемент, который при соблюдении пропорций сторон, не чувствителен к размеру отображения
• применить к фрагментам различные стили средствами CSS (цвет, градиент и прочее)
• добавить интерактива и анимации за счет применения возможностей CSS и JS

Примером может являться цикл разрабатываемых нами интерактивных заставок для веб-ресурсов ежегодного фестиваля Solar Systo Togathering:

Итак, у нас есть некий векторный файл в AI

Рассмотрим частный и особо частый случай сохранения из Adobe Illustrator.

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

Обо всём по порядку:

1. Открываем файл

Открывем файл в Adobe Illustrator:

Насколько мы видим у него есть лишние белые поля по всем сторонам. Так что первым делом мы:

2. Убираем лишние поля

3. Оптимизируем вектор в иллюстраторе

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

4. Сохраняем: File / Save As

В общем списке форматов находим SVG, выбираем его, а так же берем на заметку то, что там есть еще и SVGZ (сжатый файл, еще меньше по размеру, без потери качества).

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

• SVG Profiles
  По умолчанию используется SVG 1.1
• Fonts
  Type / Convert to outlines — что означает "перевести в кривые", то, что нам и нужно, при этом селект Subsetting становится недоступным для изменения.
  Type / SVG — Нужен в случае, если в SVG встраивается текст
  Type / Subsetting — Позволяет указать включаемый набор символов с целью дальнейшей возможности редактирования текста в режиме исходного кода и представления его графически при отображении SVG файла.
• Options
  Image 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!

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

6. Иконка планеты

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

7. На выходе получаем SVG или SVGZ файл

Вроде бы разница не велика, но это еще не конец процедуры.

Дальнейшие действия по оптимизации файла

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

How To Export SVGs For The Web From Illustrator

Something I used to struggle with was exporting SVGs from Illustrator. Our designers make these great comps for us to code up. But what’s the best way to take their vector files and convert them into an optimized SVG on the web?

Before sitting down to figure all this out, I’ll be honest: I had no idea what the right steps were. Adobe Illustrator has not one, not two, but three different ways to save an SVG! Each one opens up a different set of options and selectors.

I want to be clear. I’m not bashing Adobe for having these three different methods. There are actually valid reasons for having three because they each do different things. If you’re a designer, you may want to save your SVG in a format that preserves your guides. You don’t care about file size. You wouldn’t follow these steps at all.

But if you’re happier writing code and get anxious at the idea of opening Illustrator, let’s walk through the optimal path for getting an SVG into a format that is optimized for use on the web.

tl;dr: File > Export > Export As…

This is your golden path.

Don’t be fooled by the Save for Web option. You want to go with File > Export > Export As… Name your file and choose SVG as the format. It may seem like you’re about to save the image without the ability setting any options once you click Export. That button actually opens a new window before the file saves.

In most cases, these will be the options you’ll want to check. We’ll go into why below, but if you’re looking for the tl;dr version, mimic what you see here and you’ll be good to go:

Styling

You’ll almost always want to choose presentation attributes. If we have an SVG that is black but want it to be white in a hover state, we’d use CSS to change the color. If the black color is saved as presentation attributes, it’s easier to define that new color because CSS always overwrites presentation attributes. Specificity can be our friend!

Inline style or internal CSS are useful if we have a giant SVG that we’re trying to optimize in some way. But 99% of the time, presentation attributes is the option you’ll want.

Choosing font is the much more efficient option, especially on bigger images. The only reason you’d want to choose convert to outlines is if you were using an obscure font (maybe in a client logo) or you were having trouble with letters displaying correctly in your export.

Convert to outlines changes your letters from a font to vectors. You may solve a display issue but you’re taking a performance hit and likely breaking accessibility guidelines. Like presentation attributes above, 99% of the time you’ll want to go with font as your option here.

Images

If you are using a raster graphic (like a JPG) in your SVG, you have two options. Choosing link means the raster graphic will live in its own file somewhere else. Choosing embed will make it part of the SVG. There’s no real performance difference either way since the file still has to be loaded. But linking keeps your SVG and non SVG components separate and easier to read. This one is personal preference. I like to embed it unless it’s a raster graphic I’m reusing elsewhere.

Object IDs

This is what is used by CSS or JS to target parts of the image for manipulation. Minimal is usually the best choice. Unique will create *long* strings of text to ensure everything is different. But it’s a pain to copy those strings to CSS or JS. If you’ve named all your layers in Illustrator, you can choose layer names to have those be the IDs.

Since I usually don’t need to be able to target every single aspect of an SVG, I go with minimal and update any classes I do use with a find/replace in my IDE. You could just as easily do this in Illustrator but I’m more comfortable editing code than editing an image.

Minimal is great for file size, but if you have multiple SVGs with minimal class names, you’re going to end up styling things you didn’t mean to because you have duplication. Hence why I go with minimal and then modify as I need to use them.

Decimal

2 is usually the best choice. If you make the number smaller, you’re removing precision of your vectors. If you make the number bigger, you’re adding precision but also adding to the file size.

Minify

Responsive

It might make logical sense to turn this on. But we actually want to leave it off. If we check this box, our SVG won’t have any width or height on it. Until we add a width and height with CSS, our SVGs won’t know what to do. In a lot of cases, they will fill as much space as possible. By turning off responsive, we are adding a width and height to the base SVG. Luckily, if we also define a width and height in our CSS, it will override what is defined in the SVG itself.