Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   .SVG to Raphael JS (https://javascript.ru/forum/dom-window/15585-svg-raphael-js.html)

Constantin.UK 04.03.2011 22:31

.SVG to Raphael JS
 
Добрый вечер
Необходимо разместить на страничке векторные изображения. Прочитав несколько статей по данной теме, решил использовать библиотеку Raphael. В первую очередь из-за кроссбраузерности. Но если вставить "сырой" код из .SVG, или ссылку на него - то половина браузеров уже ничего не видит. Просмотрел примеры, заметил что код слегка модифицирован. Синтаксис изменен.
Вопрос, как подогнать изображение из illustrator, в код Raphael?

Пример:
Стандартный .SVG
Тот же рисунок, но с измененным синтаксисом.

Constantin.UK 05.03.2011 15:50

Не сталкивались?

FINoM 06.03.2011 06:07

Не в курсе как это сделать, но, возможно, тебе поможет http://code.google.com/p/svgweb/ - дает поддержку SVG всем браузерам, не поддерживающим этот формат. Требует флеш.

Constantin.UK 06.03.2011 16:00

Цитата:

Сообщение от FINoM (Сообщение 95249)
Не в курсе как это сделать, но, возможно, тебе поможет http://code.google.com/p/svgweb/ - дает поддержку SVG всем браузерам, не поддерживающим этот формат. Требует флеш.

Не, флеш отпадает сразу. Необходимо сделать все оформление используя векторную графику, и добиться кроссбраузерности с помощью Raphael. Без загрузки сторонних плагинов. Чтоб все работало "из коробки".

FINoM 07.03.2011 00:17

Цитата:

Сообщение от Constantin.UK
. Необходимо сделать все оформление используя векторную графику

А зачем, если не секрет?

Aetae 07.03.2011 00:40

Ну разве это так сложно: google -> SVG to Raphael .
https://github.com/wout/raphael-svg-import

Constantin.UK 07.03.2011 20:22

Цитата:

Сообщение от FINoM (Сообщение 95389)
А зачем, если не секрет?

У меня все оформление выполнено в графическом стиле, много картинок. Если более точно, то деревянный стол, на котором лежат различные предметы, визитки, чашка кофе, письма. Если все это дело оставить в .png, .gif - то размер страницы превышает 2мб. Это много.
Если все в векторной графики (все исходники именно в ней), то размер в 10 раз меньше, а это существенно.Плюс ко всему намного четче смотрится.
Многие изображения повернуты. Если растр поворачивать средствами css/javascript - то качество картинки заметно падает.



Поварачивать изначально в редакторе не получится, потому что картинки являются ссылками, с событием "onmouse". Пустые области не должны реагировать на курсор.

Плюс ко всему, не хочу рисовать отдельный пак графики под каждое разрешение. Векторное будет смотреться везде одинаково качественно.
Хочу найти решение, чтоб размер картинки зависел от размера окна браузера, и автоматически делал "scale". Знаю решение под растровое, но там таблицы - это немного другое.

Constantin.UK 07.03.2011 20:34

Цитата:

Сообщение от Aetae (Сообщение 95390)
Ну разве это так сложно: google -> SVG to Raphael .
https://github.com/wout/raphael-svg-import

Этот способ, первым делом испробовал. Но он, как и все которые находил в google, не дает положительного результата. 1 из 10 картинок он смог более-менее нормально отрисовать.
Чаще всего выходит следующее:




У меня не очень сложная графика в картинках, но и не простые кнопочки-квадратики. Но все что перепробовал, не дает должного результата.


Часовой пояс GMT +3, время: 08:49.