Как правильно организовать пути и заливки в иконках svg при подготовке к вёрстке?

Question

[larka_skaz]

Добрый день, всем!
Делаю пиксель перфект иконки для веб приложения. Они состоят из путей и заливки. Это иконки для меню. Предполагается что эти иконки будут иметь два состояния - активное и неактивное. Будет изменяться только цвет путей-линий .
Вопрос следующий вообще можно не переводить пути в заливки? Если, да то для успешного изменения цвета стоит ли их группировать в файле ?

Answer 1

[lagudal]

Вопрос следующий вообще можно не переводить пути в заливки? Если, да то для успешного изменения цвета стоит ли их группировать в файле ?

Вопрос некорректный - кажется вы путаете path и stroke, или я не понял вопроса.
Если все же понял, то лучше перевести, и создать составной контур, еще лучше - один контур, одна иконка.
Тогда один раз hover - fill какой надо и все.

Comments

[larka_skaz]

lagudal Да, спасибо за поправку , path - spoke. Смотрите, а если в одной иконке будет две заливки разного цвета, то верстальщик сможет при необходимости поменять цвет только одной заливки?

[lagudal]

Смотрите, а если в одной иконке будет две заливки разного цвета, то верстальщик сможет при необходимости поменять цвет только одной заливки?

нет, сколько угодно, только надо будет добавить для каждого контура свой id или класс(лучше класс, если планируется для всех иконок одинаковое поведение и цвета, или id, если каждая иконка будет оригинальна в плане цвета и тп). Хотя если верстальщик знаком c svg он это и сам может добавить.
<path class="my_icon" .....</path>

[larka_skaz]

Спасибо большое, все стало понятно. Однако, верстальщик сказал скинуть ему два варианта иконки и не пудрить ему мозги. ) Но принцип мне ясен. В Illustrator делаю составной контур, раскладываю на разные слои, и сами слои подписываю адекватными именами.

[lagudal]

не путайте слои (Layers) и контуры, которые пути (paths)
слои в иллюстраторе и слои в фотошопе немного разные вещи.
Если я понял правильно, вам нужно сделать максимум 2 составных контура (pats), цвета у которых будут разные и изменяемые по hover.
Если все так и есть - сделайте следующее:
1. Сохраните файл как svg (ничему никаких имен в самом illustrator не надо присваивать, сохраните файл БЕЗ ИМЕН).
2. Откройте svg файл в текстовом редакторе, например, notepad++
Вы видите примерно следующий код.

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="..... xml:space="preserve">
<path d="M67.47,73.8........................"/>
<path d="M165.11,96.8........................"/>
</svg>

3. Убедились, что путей - path - у вас 2, как и было задумано - и определили, какой из них есть какой - вот тут присвойте каждому свой класс. Сразу после path и перед координатами добавьте class="name", для каждого свой, вот так -

<path class="name1" d="....."/>
<path class="name2" d="....."/>

4. Сохраните файл в notepad++.
5. Передайте верстальщику.
Вот и все, теперь верстальщик к любому классу сможет в любой нужный момент применить любой нужный ему цвет, по дефолту, по наведению, а также трансформацию, анимацию, и кучу всего того прекрасного, что дает нам css и svg.

Однако, верстальщик сказал скинуть ему два варианта иконки и не пудрить ему мозги. )

Я не знаю ни его мыслей, ни квалификации. Я бы делал так, как я написал. И мне не надо было бы 2 варианта. Можно только предполагать, зачем они ему. Когда сделает, можно будет сравнить и сделать выводы. )

[larka_skaz]

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