Почему нарисованные svg в Adobe Illustrator выглядят таким образом?

Question

[Артем]

В илюстраторе создаю svg файл, вывожу его в html на страницу в браузере.
Почему svg рисуется с замкнутыми линиями? Как мне настроить илюстратор так, чтобы рисовались кривые линии без замыкания?
Использую кисть, пробовал делать максимальный тонкую кисть. Важно рисовать кистью, а не пером.

Answer 1

[severnik]

Чтоб рисовать кривые без замыкания, нарисуйте две горизонтальные параллельные линии с контуром нужной толщины и на нужном расстоянии друг от друга, выделите их и в панели кисти нажмите New Brush-Art Brush (Новая кисть-Объектная кисть). В окне настроек можно всё так оставить, потом можно поменять параметры кисти, если надо будет. Рисуйте всё этой новой кистью, в браузере SVG тоже нормально будет отображаться.

Comments

[Артем]

Возможно не полно описал проблему, мне не нужны параллельные линии, мне нужна одна линия. Я создал Кисть на основе одной Линии, как вы описали, и попробовал нарисовать кистью. В браузере SVG выглядит как и требовалось. Спасибо большое за хак!

Answer 2

[Степан Воеводин]

Как вариант, после того как отрисуете всё что хотел в Illustrator. Выделите все объекты и нажмите:
Object - Expand Appearance



Тогда он все линии переведет в области, который в svg прописываются как path

Comments

[Артем]

если нарисовать обычной кистью и экспортнуть в svg, теги path итак присутствуют в разметке файла svg.
попробовал ваше решение, параллельные линии не пропали, к сожалению.

[Степан Воеводин]

Попробуй тогда так:
1. Выделить все объекты
2. Object - Expand Appearance
3. Object - Expand
4. потом зайти в панель Pathfinder (ее можно включить в табе Window)
5. Нажать самый первый значёк «Unite» (2 закрашенных квадрата)

Если уж после этого не сработает, ищи проблему в CSS.

Answer 3

[Юрий]

Не уверен, что можно заставить иллюстратор рисовать обводкой вместо заливки в режиме кисти. Проще будет CSS для отображения в браузере поменять. Сейчас у вас там задан цвет обводки и пустая заливка, просто поменяйте местами (вместо fill: none; stroke: #f00; будет fill: #f00; stroke: none;)