Начало работы

Простой пример

Давайте сразу перейдём к примеру. Посмотрите на следующий код.

<svg version="1.1"
     width="300" height="200"
     xmlns="http://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. Затем откройте файл в браузере. Он отобразится, как показано на следующем снимке экрана. (Или посмотрите его в действии)

Процесс отображения включает следующие этапы:

1. Начнём с корневого элемента <svg>:

   • Объявление типа документа, знакомое по (X)HTML, следует опустить, поскольку проверка SVG на основе DTD создаёт больше проблем, чем решает.
   • До появления SVG 2 для указания версии SVG при других видах проверки вместо этого всегда следовало использовать атрибуты version и baseProfile. В SVG 2 оба атрибута — version и baseProfile — устарели.
   • Как диалект XML, SVG всегда должен корректно связывать пространства имён (в атрибуте xmlns). Подробнее см. на странице Краткий курс по пространствам имён.

2. Красный фон создаётся с помощью прямоугольника <rect>, который покрывает всю область изображения.

3. Поверх центра красного прямоугольника рисуется зелёный круг <circle> радиусом 80px (центр круга смещён на 150px вправо и на 100px вниз от верхнего левого угла).

4. Рисуется текст "SVG". Внутренние области букв заполняются белым цветом. Текст размещается путём задания точки привязки там, где должна находиться его середина: в данном случае она должна совпадать с центром зелёного круга. Чтобы результат выглядел эстетично, можно точно настроить размер шрифта и вертикальное положение.

Основные свойства файлов SVG

• Прежде всего важно обратить внимание на порядок отрисовки элементов. Общее правило для файлов SVG: последующие элементы отображаются поверх предыдущих. Чем ниже расположен элемент, тем заметнее он будет.

• Файлы SVG в интернете можно отображать непосредственно в браузере или встраивать в HTML-файлы несколькими способами:

  • Если HTML — это XHTML и документ передаётся как application/xhtml+xml, SVG можно непосредственно встроить в исходный код XML.

  • SVG также можно непосредственно встроить в HTML.

  • Можно использовать элемент img.

  • На файл SVG можно сослаться с помощью элемента object:

    <object data="image.svg" type="image/svg+xml"></object>
    

  • Также можно использовать элемент iframe:

    <iframe src="image.svg"></iframe>
    

  • Наконец, SVG можно создавать динамически с помощью JavaScript и вставлять в DOM HTML-документа.

• О том, как SVG обрабатывает размеры и единицы измерения, рассказывается на следующей странице.

Типы файлов SVG

Файлы SVG бывают двух видов. Обычные файлы SVG — это текстовые файлы с разметкой SVG. Для них рекомендуется использовать расширение ".svg" (строчными буквами).

Поскольку файлы SVG могут достигать очень большого размера при использовании в некоторых приложениях (например, географических), спецификация SVG также допускает сжатие файлов SVG с помощью gzip. Для таких файлов рекомендуется использовать расширение ".svgz" (строчными буквами). К сожалению, при размещении на сервере Microsoft IIS добиться надёжной работы сжатых gzip файлов SVG во всех пользовательских агентах, поддерживающих SVG, очень сложно, а Firefox не может загружать сжатые gzip файлы SVG с локального компьютера. Не используйте сжатие SVG с помощью gzip, если только не размещаете файлы на веб-сервере, который, как вы знаете, будет правильно их передавать (см. ниже).

Несколько слов о веб-серверах и файлах .svgz

Теперь, когда вы знаете, как создавать простые файлы 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, можно с помощью панели «Сетевой монитор» или такого сайта, как websniffer.com. Укажите URL одного из файлов SVG и посмотрите заголовки HTTP-ответа. Если сервер не отправляет заголовки со значениями, указанными выше, обратитесь к своему веб-хостингу. Если не удаётся убедить его правильно настроить серверы для работы с SVG, возможно, это можно сделать самостоятельно. На странице настройки сервера на w3.org приведено несколько решений.

Неправильная настройка сервера — очень частая причина, по которой SVG не загружается, поэтому обязательно проверьте свой сервер. Если сервер не настроен на отправку правильных заголовков для размещённых на нём файлов SVG, Firefox, скорее всего, покажет их разметку в виде текста или нечитаемого набора символов либо даже предложит выбрать приложение для их открытия.