Авторизация все шаблоны для dle на сайте newtemplates.ru скачать

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

Рисование с помощью 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 намного сложнее, чем я могу здесь описать, но для начала вы должны иметь общее представление о том, как он работает.

Оставить комментарий
Навигация по сайту
  • Скачать 1
  • Скачать 2
  • Скачать 3
Универсальный шаблон готового сайта UseSite

Универсальный шаблон готового сайта UseSite


Полностью готовый к применению в качестве сайта шаблон UseSite является универсальным инструментом для быстрого создания Интернет проекта. В нем предусмотрены все основные модули необходимые современному сайту: фотогалерея,...

Подробнее →  

  • Просмотров: 25 954
Готовый сайт оплаты и доставки электронного товара. OnPay Система платежей

Готовый сайт оплаты и доставки электронного товара. OnPay Система платежей


Готовый шаблон сайта для продажи и доставки электронных товаров. Автоматическая оплата товара и мгновенная его отправка покупателю. Шаблон настроен для работы с платежной системой OnPay. Персональный аттестат WebMoney не...

Подробнее →  

  • Просмотров: 7 997
Редактируем шаблоны готового сайта. Скачать книгу для начинающих вебмастеров

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


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

Подробнее →  

  • Просмотров: 13 865

 

 

Нименование Количество Цена / 1 шт.
Всего: 0 руб.