Как вставлять векторные изображения на сайт?

[utkorog]

Я знаю всего три варианта:
1. Экспорт в svg-формат.
Плюс - маленький размер файла. Минус - под каждый браузер нужно писать свой код.
2. Экспорт в swf.
Плюс- несложно интегрировать в html. Минус - корел генерит файлы с самими разными багами.
3. Экпорт в jpg, png.
Плюс - полная совместимость и простота интеграции. Минус - бешенные размеры файла.

А как вы вставляете вектор на сайт?

[Diver]

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

[nSauk]

Передумал это писать.
И всё же уже сейчас есть такое.

[AlhimiK-FlameR]

Вобщем у меня похожий вопрос. По поводу SVG. Мне нужно создать страницу с динамически создающимися графиками. Кросс браузерность побоку ибо нефиг. Суть не в этом - нужен отчет в HTML максимально маленький в начальном объеме и с графиками. Отчет создан. Графики JavaScript рисует. НО:
1) при сохранении страницы с отчерчеными графиками они в коде есть но в браузере не рисуются
2) такие графики после нельзя из страницы скопировать как изображения и добавить потом например в ворд
вот урезанная версия скрипта отрисовки (как я все выводил есс-но без самого графика ибо стыдно за качество).

Код: [Выделить]

function Graph_Out(Text_ToOut,target){
var svgns = "http://www.w3.org/2000/svg";
//создаем svg картинку
var el = document.createElementNS(svgns,'svg');
el.setAttribute('version',"1.1");
el.setAttribute('baseProfile',"full");
el.setAttribute('width',350);
el.setAttribute('height',"240");
//создаем линию на картинку
var el_out = document.createElementNS(svgns,'line');
el_out.setAttribute('x1',0);
el_out.setAttribute('y1',0);
el_out.setAttribute('x2',100);
el_out.setAttribute('y2',100);
el_out.setAttribute('stroke',"#00ff00");
el_out.setAttribute('stroke-width',3);
el.appendChild(el_out);
//создаем текст в картинку
var el_out = document.createElementNS(svgns,'text');
el_out.setAttribute('x',20);
el_out.setAttribute('y',20);
el_out.setAttribute('font-size',12);
el_out.setAttribute('font-family',"Courier New");
el_out.setAttribute('fill',"#00ff00");
el_out.setAttribute('stroke',"#00ff00");
el_out.setAttribute('stroke-width',0);
el_out.appendChild(document.createTextNode(Text_ToOut));
el.appendChild(el_out);
//добавляем svg картинку на слой или куда вздумается
target.appendChild(el);
}


Можете сказать чего я не так делаю?

Браузер рисует, но после сохранения не открывает график. Весь интернет перерыл нет ничего по теме. Как добавлять в виде пространства имен непосредственно в текст Html никто не пишет толком - все графику либо из java рисуют, либо в img (object иже с ними) т.е. на сервере прямо создают и высылают либо пользуются сторонними библиотеками (что в моем случае совсем неинтересно).
отсюда два вопроса
как сделать чтоб сохранять можно было?
как воткнуть код svg прямо внутрь html кода?

[wemko]

Про графику.

Сохранение любых изображений есть в разных форматахну это вы знаете.

Файлы формата .jpeg .png это растры автоматически.
Если вам нужен файл вектора в небольшом размере советую его сжать пропорционально если он большой исходно.
тоесть как таково ваш файл может быть а4 а вам надо всего 600х350 для хорошего просмотра. Так и сохраняете его чтоб сохранить пропорциональность.  А после я бы конвертировал его в веб формат.
В Jpeg есть такакя штука как quality, я думаю вам нет необходимости выставлять 100 выставьте 70 этого будет достаточно.
В PNG есть 8 и 24 разрядность.
Грубо говоря это ширина доступныхвам цветов.
Если ето не много цветное изображение с не большим колличеством перетеканий то 8-ки вам поуши хватит.
24 для веба редко используеться.


Исходя из этого, люди дают СВГ файлы отдельно от превью изображения, и не выдумывают велосипедов=))
Удачи.

[wemko]

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

Вот недавно прочёл статью уже правда после, написания предидущего поста, о преймуществах SVG.

Сдлеаю мининмальный обзор на форуме.