Автор Тема: Как вставлять векторные изображения на сайт?  (Прочитано 14929 раз)

28 Январь, 2011, 20:30:21

Оффлайн utkorog

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

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

Форум вебмастеров - Webmasters.BY


29 Январь, 2011, 14:14:40
Ответ #1

Оффлайн Diver

  • Administrator
  • Гуру форума
  • *****
  • Сообщений: 4928
  • Репутация: 112
  • Шииикарно!
    • Просмотр профиля
а в каких целях используют векторную графику на сайтах?
она дает какие-либо преимущества перед растровой?

30 Январь, 2011, 14:26:31
Ответ #2

Оффлайн nSauk

  • Юзер
  • ***
  • Сообщений: 243
  • Репутация: 12
    • Просмотр профиля
Передумал это писать.
И всё же уже сейчас есть такое.

« Последнее редактирование: 30 Январь, 2011, 14:50:33 от nSauk »

13 Апрель, 2011, 15:08:27
Ответ #3

Оффлайн AlhimiK-FlameR

  • Школьник
  • *
  • Сообщений: 1
  • Репутация: 0
    • Просмотр профиля
Вобщем у меня похожий вопрос. По поводу 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 кода?

28 Октябрь, 2012, 08:59:06
Ответ #4

Оффлайн wemko

  • Школьник
  • *
  • Сообщений: 33
  • Репутация: 0
  • Пусть всегда будет...
  • OS: Windows 7/Server 2008 R2 Windows 7/Server 2008 R2
  • Browser: Opera 12.02 Opera 12.02
    • Просмотр профиля
Про графику.

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

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


Исходя из этого, люди дают СВГ файлы отдельно от превью изображения, и не выдумывают велосипедов=))
Удачи. :beer:
« Последнее редактирование: 28 Октябрь, 2012, 09:03:22 от wemko »
Вот это- введите надпись на картинке ну прусто аргхррр бесит жуть...

02 Ноябрь, 2012, 10:12:09
Ответ #5

Оффлайн wemko

  • Школьник
  • *
  • Сообщений: 33
  • Репутация: 0
  • Пусть всегда будет...
  • OS: Windows 7/Server 2008 R2 Windows 7/Server 2008 R2
  • Browser: Opera 12.02 Opera 12.02
    • Просмотр профиля
а в каких целях используют векторную графику на сайтах?
она дает какие-либо преимущества перед растровой?
Вот недавно прочёл статью уже правда после, написания предидущего поста, о преймуществах SVG.

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