среда, 12 октября 2011 г.

SVG + HTML

Итак вот вариант который предлагается как основной и наиболее современный духу HTML5

<embed src="//modul.da-da.biz/svg/cube.svg" 
type="image/svg+xml"/>

Другой возможностью внедрения и старой как все инетовское это применение тега ifame. Но в этом случае использования свойства объекта не будут наследоваться в точку воссоединения и придется их явно задавать как атрибуты

<iframe src="//modul.da-da.biz/svg/cube.svg" 
width="90%" frameborder="0"
height="600"></iframe>

Понятно что в этом случае нужно представлять размерность отрисовок перед тем ак внедрять сие в действо. И этот вариант ярушкой блокируется.

Следующий вариант внедрения так же относится к старым вариантам внедрения формта. Это тег object

<object data="//modul.da-da.biz/svg/cube.svg" 
type="image/svg+xml"/>

И этот вариант так же блокируются ярушкой.

Заметьте - я намеряно уточняю - блокируются ярушкой опираясь на постулат некой безопасности, но на народе - пожалуста применяй по полной и ни каких проблем, и вся их безопасная ценность псу под хвост.

Теперь перейдем к вариантам совместного или непрерывного потокового использования формата применяя nameSpace - или пространство имен. Это тот случай когда в тексте твоей страницы форматы могут пересекаться с другими тегами. Это часто используется на многих сайтах. К примеру на той же ярушке

есть пространство имен от яндекса, а вот пространства имен от стандарта SVG - W3C - международной группы интернета яндексом почему то признается не допустимой по безопасности. Я не понимаю кто должен задавать правила игры в инете - яндекс всему миру или все же мировой интернет.. Опять монополизмом и тоталитаризмом каким то завоняло., от одной маленькой и наглой компании... Ака клопишку раздавили, а вони как стадо скунсов прошло. И последнее - установку флэшек от адобы они разрешают, а об дырявости этих монстров можно слагать легенды.. Вот и всплывает на поверхность их вшивая значимость предмета по вопросам без-опасности в инете.

Ну да ладно продолжим. Этот вариант позволяет использовать встроеный инлайн непосредственно внутри документа HTML, вставляя различные SVG непосредственно между тэгами HTML. Но при этом необходимо явно указать ссылки на документы опеделяющие правила использования тэгов, а также там где конкретный NameSpace-тэг используется - необходимо явно указать именования самого NameSpace. Вот как это делается на конкретном примере.

<?xml version="1.0"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<body>
Привед
<svg:svg version="1.1" width="60" height="100">
<svg:rect x="10" y="25" width="80" height="80" fill="red"/>
<svg:circle cx="30" cy="50" r="30" fill="blue"/>
</svg:svg>
Медвед!
</body><html>

Посмотреть как это будет выглядеть в реале можно здесь. Таким образом мы с помощью дополнительного формата создаем свой уникальный графический элемент. При этом разработчик должен понимать, что такой способ создния объектов своих страниц резко сокращает траффик, так как все необходимые элементы дизайна можно просто синтезировать на стороне браузера у клиента, а не носить их по инету, как это делается сейчас, способом массового рекопирования нано-гифов.Основной фокус подобного использования, это объявление документа как формат XML, более общий случай HTML, по правилам которого допускается смешение разных стилей и при явном указании именных различий. Этот же вариант смешения стилей можно использовать и в XUL документах, но я из-за ограничености мастаба приводить не буду., так как более полное описание всех методов вошло в мою книжку, которая частично здесь публикуетя. конкретно.