LINUX.ORG.RU
решено Форум — Web-development  

[чайник] Как добавить SVG в html?

 


0

1

Есть svg, есть простой html.

Можно ли не сильно увеличивая частностей (кода в html) добавить туда svg? В идеале я хотел бы обращаться с svg, как с внешней картинкой. Хотя если её можно добавить фоном, то тоже ничё.

★★★★★
← php - livejpurnal - парсинг
Права на файл (chmod) →
Ответ на: комментарий от Evgueni

Может быть какой-нибудь другой DOCTYPE надо прописать?

Evgueni ★★★★★
() автор топика
Ответ на: комментарий от aho

Это я уже смотрел

а) мне не нужен внешний плагин, так как FF SVG видит

б) мне не нужно добавлять SVG в код html. Сам html имеет размер 3 кб, а SVG 56 кб, то есть потеряться потом в html будет можно.

Evgueni ★★★★★
() автор топика
Ответ на: комментарий от adepto

> Реализация SVG в браузерах плохо работает.

Мне не нужна анимация. Мне нужно увидеть картинку. FF её видит и мне этого достаточно, но теперь я хочу внедрить эту картинку в html.

Evgueni ★★★★★
() автор топика
Ответ на: комментарий от Evgueni

> а) мне не нужен внешний плагин, так как FF SVG видит

б) мне не нужно добавлять SVG в код html


а вы точно ходили по ссылке?

aho
()
Ответ на: комментарий от aho

а вы точно ходили по ссылке?

Этот способ 

<embed src="rect.svg" width="300" height="100"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />
требует установки плагина

Этот способ 

<object data="rect.svg" width="300" height="100"
type="image/svg+xml"
codebase="http://www.adobe.com/svg/viewer/install/" />
предполагает что плагин установлен

Этот способ 

<iframe src="rect.svg" width="300" height="100">
</iframe>
Добавляет iframe который мне найиг на моей простой страничке не нужен.

Evgueni ★★★★★
() автор топика
Ответ на: комментарий от CrossFire

>Хромиум видит, но лучшеб не видел) http://img130.imageshack.us/img130/2138/chromium.png

Он видит iframe (я сейчас курочил), который и FF видит. Этого мне не нужно. А добавление через IMG хромиум не видел.

Evgueni ★★★★★
() автор топика
Ответ на: комментарий от Evgueni

> Этот способ

<object data=«rect.svg» width=«300» height=«100» type=«image/svg+xml» />

предполагает что плагин установлен


этот способ работает как миниму для crome и FF без всяких сторонних плагинов

aho
()
Ответ на: комментарий от aho

> этот способ работает как миниму для crome и FF без всяких сторонних плагинов

Заработал. Надо было codebase="http://www.adobe.com/svg/viewer/install/ убрать. Добавил. Хотя двойки куда-то в картинке подевались.

Но теперь adblock предлагает его заблокировать. Как-то не удобно.

Как нибудь можно добавить альтернативную надпись?

Evgueni ★★★★★
() автор топика
Ответ на: комментарий от aho

> этот способ работает как миниму для crome и FF без всяких сторонних плагинов

А ещё есть способы? А то как-то куцо.

Evgueni ★★★★★
() автор топика
Ответ на: комментарий от Evgueni

Это какая-то проблема с выводом из MetaPost в svg, так как с eps всё O'k. Надо будет разбираться.

Evgueni ★★★★★
() автор топика
Ответ на: комментарий от CrossFire

></img>

(~_~)

Надо бы делать в <img/>, но не все браузеры его умеют. Про остальные варианты уже сказали.

Deleted
()

Тело одной из моих веб-морд представляет следующее: 

<html>
<meta http-equiv="Content-Type" content="text/html; charset=koi8-r"></meta>
<head>
<link rel="stylesheet" href="temp.css" type="text/css">
<script type="text/javascript" src="svg.js"></script><!--функции для работы с SVG-->
<script type="text/javascript" src="functions.js"></script><!--обработка данных-->
</head>
<body onLoad="start();" onkeydown="onkey(event.keyCode);">
<embed style='border: 1px solid;' id='SVG' src='scene.svg' type='image/svg-xml'
width="50px" height="35px"></embed>
<div class="tooltip" id="coords"></div>
</body>
</html>
Все отлично работает.

Eddy_Em ☆☆☆☆☆
()
Ответ на: комментарий от zootcat

> http://i.piccy.info/i5/07/27/942707/shot.png

Подтверждаю. А вот это уже не приятно ☹ Если на IE можно наплевать, то на Cromium это сделать уже не получится.

В общем вопрос остаётся в силе: как SVG внедрить в html. Формально все браузеры кроме IE давно SVG поддерживают.

Evgueni ★★★★★
() автор топика

На самом деле у меня простая цель: сделать страничку с примерами, где слева идёт пример кода MetaPost, а справа результат в SVG.

Evgueni ★★★★★
() автор топика
Ответ на: комментарий от Eddy_Em

> Все отлично работает.

FF 3.6 требует скачать плагин для отображения контента. Хотелось бы обойтись без этого.

Evgueni ★★★★★
() автор топика

Вроде разобрался. Пока с поддержкой SVG довольно печально. Все пользуются довольно кривоватыми костылями.

Для cromium, в частности, для вставки через object (единственное что как-то есть в стандартах) требуется размеры указывать в точности такие, какие в самом svg прописаны, будто то не вектор, а растр. В чём польза от такого поведения я не понимаю.

Откатился на страничке к png.

Evgueni ★★★★★
() автор топика
Ответ на: комментарий от Eddy_Em

Что-то не пойму: статические SVG у меня и в офлайне отображаются...

Eddy_Em ☆☆☆☆☆
()
Ответ на: комментарий от Evgueni

Что-то ты не так делаешь. У меня в одном веб-интерфейсе (ссылочку, правда, дать не могу - наружу айпишника нет) графики рисуются посредством gnuplot с выводом в SVG. В огнелисе, начиная с ~3.3 (более ранние не проверял) работает, в опере работает, даже в «ишаке» (начиная с ~восьмого) работает...

Eddy_Em ☆☆☆☆☆
()
Ответ на: комментарий от Eddy_Em

> Тебе нужно отображать SVG в offline, без упоминания xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"?

Немного не понял.

Есть: Браузеры видят просто svg, когда его загружают (все кому не лень видят, даже к моему удивлению emacs грузит svg как картинку). Браузеры видят html.

Хотелось бы: скрестить эти возможности, то есть вместо png использовать svg.

Условия: Использование svg не должно быть сложнее использования png. Должна быть хоть какая-то польза от векторной природы svg (браузеры должны его легко масштабировать).

На что можно не обращать внимания: на IE.

Evgueni ★★★★★
() автор топика
Ответ на: комментарий от Eddy_Em

> В огнелисе, начиная с ~3.3 (более ранние не проверял) работает, в опере работает, даже в «ишаке» (начиная с ~восьмого) работает...

Может там везде адобовские плагины стоят?

Evgueni ★★★★★
() автор топика
Ответ на: комментарий от Evgueni

ОК. У меня в вышеупомянутом интерфейсе для «любителей» всякого старого хлама помимо вывода в SVG реализован вывод в jpg и gif (можно выбрать в самом интерфейсе «на лету»). SVG отображается в контейнере <embed>, а jpg/gif - в контейнере <img>. Выбор контейнера проивзодится JavaScript'овой функцией: 

 function mkImage(mask){
	if(ShowOnGraph == 0) return;
	clear_cencol();
	if(!mask) return;
	if(ImType == '0')
		var image_ = document.createElement('embed');
	else
		var image_ = document.createElement('img');
	image_.id = 'IMG';
	$('cencol').appendChild(image_);
	var str = CGI_PATH + '?Graph=' + ShowOnGraph + '&' + 'Gtype=' + ImType;
	if(t_start) str += '&Tstart=' + t_start;
	else return;
	if(t_end) str += '&Tend=' + t_end;
	str += '&Stat=' + mask;
	$('IMG').src = str + '?' + Math.random();
}

Eddy_Em ☆☆☆☆☆
()
Ответ на: комментарий от Evgueni

Может там везде адобовские плагины стоят?

Нет, для SVG спец. плагины не ставил.

Eddy_Em ☆☆☆☆☆
()
Ответ на: комментарий от Eddy_Em

> SVG отображается в контейнере <embed>, а jpg/gif - в контейнере <img>.

Это не интересно. Это и есть костыли ☺

Хотелось бы чтобы SVG эпоха уже бы наступила.

Evgueni ★★★★★
() автор топика
Ответ на: комментарий от Evgueni

Хотелось бы, конечно. А еще - чтобы SVG 2.0 браузеры поддерживали (а то я никак не могу нормальный 3D-интерфейс для термодатчиков нарисовать). Но, что поделать, приходится довольствоваться тем, что есть.

Eddy_Em ☆☆☆☆☆
()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.
← php - livejpurnal - парсинг
Web-development
Права на файл (chmod) →