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

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

<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. Затем откройте этот файл в браузере. Он будет отображён так, как показано на следующем снимке экрана. (Пользователи Firefox: нажмите здесь)

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

1. Мы начинаем с корневого элемента <svg>:
   • Декларация типа документа, как известная из (X)HTML, должна быть опущена, потому что проверка SVG на основе DTD приводит к большему количеству проблем, чем решает.
   • До SVG 2 для идентификации версии SVG для других типов проверки version и baseProfile атрибуты всегда должны использоваться вместо этого. Оба атрибута version и baseProfile устарели в SVG 2.
   • В качестве диалекта XML SVG всегда должен правильно связывать пространства имён (в атрибуте xmlns). Подробную информацию см. на странице Руководство по пространствам имён.
2. Фон устанавливается в красный цвет путём рисования прямоугольника <rect>, который покрывает всю область изображения.
3. Зелёный круг <circle> радиусом 80 пикселей рисуется поверх центра красного прямоугольника (центр круга смещён на 150 пикселей вправо и на 100 пикселей вниз от левого верхнего угла).
4. Рисуется текст «SVG». Внутренность каждой буквы заполнена белым цветом. Текст позиционируется путём задания якоря, где должен быть середина: в этом случае середина должна соответствовать центру зелёного круга. Для обеспечения эстетичного внешнего вида можно выполнить тонкую настройку размера шрифта и вертикального положения.

• Первое важное замечание заключается в порядке отображения элементов. Общим правилом для файлов SVG является то, что позже отображаемые элементы находятся над предыдущими элементами. Чем ниже элемент, тем он будет более заметен.
• Файлы SVG в веб-среде могут отображаться непосредственно в браузере или встраиваться в файлы HTML несколькими способами:
  • Если HTML является XHTML и передаётся как тип application/xhtml+xml, SVG может быть непосредственно встроен в исходный XML.
  • SVG также может быть непосредственно встроен в HTML.
  • Можно использовать элемент img.
  • Файл SVG может быть сохранён с помощью элемента object:
    html

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

  • Аналогичным образом можно использовать элемент iframe:
    html

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

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

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

Из-за потенциально большого размера файлов SVG, которые могут достигаться при использовании для некоторых приложений (например, географических приложений), спецификация SVG также позволяет использовать сжатые gzip файлами SVG. Рекомендуемое расширение файла для этих файлов — ".svgz" (строчными буквами). К сожалению, очень проблематично заставить сжатые gzip файлы SVG работать надёжно во всех агентах пользователя, совместимых с SVG, при их подаче с сервера Microsoft 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, используя панель «Монитор сети» (ссылка) или веб-сайт, такой как websniffer.com. Отправьте URL одного из ваших файлов SVG и посмотрите HTTP-заголовки ответа. Если вы обнаружите, что ваш сервер не отправляет заголовки со значениями, указанными выше, свяжитесь со своим хостинг-провайдером. Если вы столкнулись с проблемами убедить их правильно настроить серверы для SVG, могут быть способы сделать это самостоятельно. Обратитесь к странице конфигурации сервера (ссылка) на w3.org для ряда простых решений.

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