Векторное изображение SVG рисование, Base64 кодирование, отображение

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

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

Векторные изображения можно нарисовать на сайте используя XML – eXtensible Markup Language – расширяемый язык разметки. Фигура , которую мы нарисовали выше рисуется следующим образом:
<?xml version="1.0"?>
<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
<g>
<title>Layer 1</title>
<ellipse id="svg_1" ry="152" rx="216" cy="242" cx="335" stroke-width="5" stroke="#000000" fill="#FF0000"/>
<ellipse id="svg_2" ry="44" rx="98" cy="1089" cx="1495" stroke-width="5" stroke="#000000" fill="#FF0000"/>
</g>
</svg>

Но в таком виде эллипс можно показать только создав отдельную страницу , например draw.xml в котором будет приведенный выше XML- код. Как от XML перейти к адресной строке? Для этого используют кодировку Base64. Вы можете закодировать/раскодировать любой набор символов с помощью нашей онлайн утилиты Base64 online encode/decode , либо при помощи PHP.

Для вебмастера, знакомого с основами PHP, не должно возникнуть трудностей при написании следующего скрипта:

<?
$data = '<?xml version="1.0"?>
<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
<g>
<title>Layer 1</title>
<ellipse id="svg_1" ry="152" rx="216" cy="242" cx="335" stroke-width="5" stroke="#000000" fill="#FF0000"/>
<ellipse id="svg_2" ry="44" rx="98" cy="1089" cx="1495" stroke-width="5" stroke="#000000" fill="#FF0000"/>
</g>
</svg>';
echo base64_encode($data);
?>

Результатом работы нашего скрипта станет Base64 отображение XML кода:

Чтобы превратить этот набор символов в красный эллипс , нужно просто скопировать всё и добавить в начало в адресной строке: data:image/svg+xml;base64,. Получится длинная строка:

Кроме того , можно открывать эту фигуру проследовав по ссылке.

Для этого представленный выше код , вместе с data:image/svg+xml;base64, вставляют в тег <a>

<a href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0i....и-так-далее.....">ссылка на фигуру</a>

Ещё мы можем превратить php-скрипт в SVG рисунок. Для этого в PHP-скрипт добавляется заголовок (header), сообщающий браузеру что он будет иметь дело с векторным рисунком SVG, кроме этого мы сообщим браузеру имя файла, XML код не кодируют в Base64 и вот как будет выглядеть наш скрипт-рисунок:
<?
header("Content-type: image/svg+xml");
header('Content-Disposition: attachment; filename="WeblomasterRu.svg"');
$data = '<?xml version="1.0"?>
<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
<!-- Created with http://weblomaster.ru/ -->
<g>
<title>Layer 1</title>
<ellipse id="svg_1" ry="152" rx="216" cy="242" cx="335" stroke-width="5" stroke="#000000" fill="#FF0000"/>
<ellipse id="svg_2" ry="44" rx="98" cy="1089" cx="1495" stroke-width="5" stroke="#000000" fill="#FF0000"/>
</g>
</svg>';
echo $data;
?>

Опубликовано 27.03.2015 в 02:43 · Автор Вебдизайнеру, сисадмину, вебмастеру · Ссылка
Рубрики: HTML, PHP программирование, Графика, Интернет · Теги: , , , , , , , , , ,