Сайт своими руками


Пособие для начинающих
Редактируем готовые шаблоны


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


Рисование с помощью XML

  • Автор: Saah
  • |
  • Комментариев: 0
  • |
  • Просмотров: 377
Рисование с помощью XML
Простое изображение в формате SVG svg4u.svg

Основное отличие формата SVG в том, что инструкции по рисованию предоставляются на языке XML. Растровые изображения хранятся как по большей части непонятный код (если вы потрудитесь заглянуть внутрь), но изображения в формате SVG создаются текстовыми файлами, которые, как правило, удобочитаемы. Давайте рассмотрим простой пример и текстовый файл XML, скрытый за ним. На рисунке выше показано изображение SVG, svg4u.svg, состоящее из синего квадрата, овала с градиентной заливкой и текста (не самый красивый рисунок, я знаю, но хорошая иллюстрация к теме).

Ниже приведен файл, который создает это изображение. Если вчитаться в него, я думаю, вы решите, что интуитивно он вполне понятен.

<?xml version="1.0" encoding="utf-8"?> <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="450px" height="200px"> <linearGradient
id="yellowgrad"> <stop offset="0" stop-color="#FFF200"/> <stop offset="1"
stop-color="#F15A29"/> </linearGradient> <rect x="50" y="50" width="100" height="100"
fi ll="#4F5AA8" stroke="#000000" stroke-width="4" /> <ellipse cx="100" cy="100"
rx="50" ry="25" fi ll="url(#yellowgrad)" /> <text x="175" y="150" fi ll="rgb(200,0,0)"
fontfamily="Verdana" font-weight="bold" font-size="50">SVG 4 U!</text> </svg>

Рассмотрим подробнее, что происходит в файле svg4ru.svg.
Так как это файл XML, он начинается с определения XML. Оно также должно придерживаться синтаксиса XML, поэтому вы заметите, что все элементы прописаны в нижнем регистре, все атрибуты заключены в кавычки, и все элементы закрыты (например, ). Элемент svg задает область рисования, которая составляет 450 на 200 пикселов. Пикселы установлены по умолчанию как единицы измерения в SVG, поэтому вам не нужно добавлять обозначение рх.
Атрибут xmlns означает «пространство имен XML», и он просто идентифицирует языки XML, используемые в документе.

Так, теперь рисование. Квадрат создается с помощью элемента rect (прямоугольник) ширина и высота которого заданы в размере 100 пикселов. Вы можете видеть, что для указания положения, размеров, цвета заливки, стиля обводки и так далее используются атрибуты. Помимо rect в файле SVG содержатся элементы circle, ellipse, line, polygon, и polyline для рисования линий и форм.

В нашем примере элемент ellipse расположен по центру поверх квадрата, и его заливка выполнена с помощью градиента «yellowgrad», который был создан с использованием элемента linearGradient ранее в документе. Текст в изображении содержится внутри элемента text, а стили к нему добавлены с помощью атрибутов, использующих синтаксис CSS. Хотя это и не показано в примере, в изображениях SVG также можно разместить растровые изображения с помощью тега image. Конечно, язык SVG намного сложнее, чем я могу здесь описать, но для начала вы должны иметь общее представление о том, как он работает.


Людям интересно:


Статья опубликована: 23-09-2016, 05:04

Сохраните для себя


Оставьте комментарий.
Ваше мнение будет полезно посетителям сайта:




Имя:* E-Mail:*
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Вставка ссылкиВставка защищенной ссылки Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Введите код: *
Использование материалов сайта приветствуется. При копировании и размещении данной информации на сторонних ресурсах, ссылка на сайт SiteY.ru желаема.