Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.
Простой пример
Давайте начнем наше погружение с простого примера. Посмотрите на код представленный ниже:
<svg version="1.1"
baseProfile="full"
width="300" height="200"
xmlns="https://www.w3.org/2000/svg">
<rect width="100%" height="100%" fill="red" />
<circle cx="150" cy="100" r="80" fill="green" />
<text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
</svg>
Скопируйте код и вставть его в файл demo1.svg. После чего откроейте его в Firefox. Браузер отобразит Вам следующее изображение (пользователи Firefox нажмите сюда):
Процесс отображение включает следующее:
- Мы начаем с корневого элемента
svg:- декларацию doctype, как известно из (X)HTML, следует опустить, потому что DTD на основе валидации SVG приводит к большим проблемам, чем решает
- чтобы определить версию SVG для других типов валидации, следует использовать вместо атрибуты версии и
baseProfile - как диалект XML, SVG всегда правильно должен связывать простанства имен (в атрибуте xmlns). Смотри страницу Namespaces Crash Course для большей информации.
- Фон устанавливается красным при помощи рисования прямоугольника
<rect/>, который покрывает всю область изображения - Зеленый круг
<circle/>с радиусом 80px рисуется поверх центра красного прямоугольника (смещение 30+120px вовнутрь, и 50+50px вверх). - Текст "SVG" рисуется. Внутренняя часть каждой буквы наполняется белым. Расположение текста определяется привязкой, где мы хотим, чтобы была середина: в этом случае середина должна соответствовать центру зеленого круга. Для улучшения эстетического вида можно сделать точные настройки размера шрифта и вертикального положения.
Основные свойства файлов SVG
- Первая важная вещь, которую следует заметить - это порядок отображения элементов. Глобально действующее правило для файлов SVG - это, что последующие элементы отображаются предыдущими верхними элементами. Далее вниз элемент будет более видимым.
- Файлы SVG в вэбе могут быть отображены прямо в браузере или внедрены в файлы HTML посредством нескольких методов:
- Если HTML является XHTML и выводится как тип приложение
/xhtml+xml, SVG может быть прямо внедрён в источник XML. - Если HTML является HTML5, и браузер совместим с HTML5, SVG может быть прямо внедрён тоже. Однако, возможны синтаксические изменения для совмещения с HTML5 специфированием
- SVG файл может быть привязан с элементом
object:<object data="image.svg" type="image/svg+xml" />
- Аналогично может быть использован элемент
iframe:<iframe src="image.svg"></iframe>
- Элемент
imgтоже может быть использован теоритически. Однако эта техника не работает в Firefox до версии 4.0. - Наконец SVG может быть создан динамически с помощью JavaScript и введён в HTML DOM. Этот способ имеет преимущество тем, что могут быть реализованы замещающие технологии для браузеров, которые не могут воспроизводить SVG.
- Если HTML является XHTML и выводится как тип приложение
- Как SVG управляет размерами и единицами будет объяснено на следующей странице.
Типы SVG файлов
Файлы SVG бывают двух видов. Нормальные файлы SVG - это простые текстовые файлы, содержащие разметку SVG. Рекомендуется расширение ".svg" (все нижним регистром) к имени файла для этих файлов.
Благодаря потенциально массивному размеру, который файлы SVG могут иметь при использовании в некоторых приложениях (например, географические приложения), специфирование SVG также допускает gzip-архивированные файлы SVG. Рекомендуется расширение ".svgz" (все нижним регистром) к имени файла. К сожалению, очень проблематично получить gzip-архивированные файлы SVG для надёжной работы со всеми SVG совместимыми пользовательскими агентами при управлении с сервера Microsofts IIS, когда Firefox не может загрузить gzip-архивированный SVG с локального компьютера. Избегай gzip-архивированного SVG, кроме случаев, когда ты публикуешься на вебсервере, в корректной работе которого ты уверен (смотри ниже).
Слово на Вебсерверах
Теперь, когда ты имеешь представление о том, как создавать основные файлы SVG, следующим шагом будет загрузить их на Вебсервер. Но существуют некоторые подводные камни на этом этапе. Для нормальных файлов SVG, сервера должны посылать заголовки HTTP:
Content-Type: image/svg+xml Vary: Accept-Encoding
Для gzip-архивированных файлов SVG, сервера должны посылать заголовки HTTP:
Content-Type: image/svg+xml Content-Encoding: gzip Vary: Accept-Encoding
Ты можешь проверить, правильные ли заголовки HTTP посылает твой сервер с твоими файлами SVG, используя Network Monitor panel или сайт, такой как web-sniffer.net. Введи URL одного из файлов SVG и смотри на ответные заголовки HTTP. Если ты найдёшь, что твой сервер не посылает заголовки с величинами, данными выше, тогда тебе следует связаться с хост-сайтом. Если у тебя будут проблемы убедить их корректно сконфигурировать их сервера для SVG, существуют способы сделать это самостоятельно. Смотри server configuration page на странице SVG wiki о ряде простых решений.
Неверная конфигурация сервера является очень частой причиной в невозможности загрузить SVG, поэтому убедись, что ты проверил конфигурацию твоего сервера. Если твой сервер не сконфигурирован для того, чтобы посылать правильные заголовки с файлами SVG, тогда Firefox будет вероятнее всего показывать разметку файлов как текст или кодированный мусор, или даже спрашивать программу просмотру выбрать приложение, чтобы открыть их.