“Основа основ, но какая же ты запутанная и огромная”. Вот что приходит в голову, когда смотришь на шапку в примерах SVG файлов из разных уважаемых источников.
Различия начинаются буквально с первой строки: в одних файлах есть стандартный XML-заголовок, объявление, указывающее версию XML (version) (обычно “1.0”) и кодировку символов (encoding):

и далее заголовок DOCTYPE, определяющий тип документа:

в других примерах XML-заголовка и объявления DOCTYPE нет:

Так как же правильно? Что нужно обязательно прописать, а что можно и пропустить, не переживая за то, что что-то не сработает из-за неполного или неточного заголовка файла SVG?
Ответ даёт:

Второй важный момент это объявление viewPort – системной области просмотра и viewBox – пользовательской области просмотра.
Если не указать размеры этих областей просмотра, то вычисление реальных координат объектов вызывает трудности у браузера Mozilla и некоторых других браузеров.

Первая строка листинга выше это объявление viewport. Указывается только его ширина и высота. Начало координат viewport всегда находится в левом верхнем углу, поэтому не указывается в объявлении. Положительное направление осей ординат: “Х” – вправо,
“Y” – вниз.
Вторая строка это – viewBox, который может быть расположен в любом месте на холсте SVG, поэтому первые два параметра, отвечающие за начало координат viewBox могут либо совпадать с началом координат viewport (0,0), либо отличаться от нулей, сдвигая тем самым изображение по осям ординат – подробнее здесь.
Изменением соотношения ширин и соответственно высот viewport и viewBox можно увеличивать или уменьшать изображение.
Допустим ширина и высота viewport в два раза больше ширины и высоты соответственно viewBox:

При таком соотношении изображение увеличится ровно в два раза – подробнее здесь.
Равенство этих параметров viewport и viewBox гарантирует отрисовку элементов в масштабе 1:1, без трансформаций.

• <title> ….. </title>
  Изначально SVG был задуман, как самостоятельный векторный формат в виде изолированного файла. Поэтому он имеет парный тег заголовка <title> по аналогии с файлом *.html для краткого описания смыслового содержания файла.
• тег <desc> ….. </desc> служит для более развернутого описания содержания файла. Оба эти тега необязательны, но их наличие полезно, так как поисковики очень хорошо индексируют содержащийся в них текст, сначала, как заголовок к картинке, а затем как её описание. Разработчик файла SVG может использовать эти теги многократно внутри одного файла, облегчая понимание отдельных частей кода.
• Следующая важная, но не обязательная часть – это секция, заключенная в парные теги <defs> …. </defs>
  <defs> (от англ. definitions — определения). По сути это библиотека, где вы можете создавать и хранить любые элементы SVG: pattern, marker, path, gradient, а так же любую из основных фигур SVG. Для использования этого элемента в этом же файле или в другом файле, элементу необходимо присвоить уникальное имя id = “…”.
  1 2 3 4 5 6 7 8 9 10 11 12

  <defs>       <pattern id="newpattern"              x="0" y="0" width="20" height="20"              patternUnits="userSpaceOnUse" >                            <g fill="#85D2FF"  fill-opacity="0.7">              <rect x="0" y="0" width="10" height="10" />              <rect x="10" y="10" width="10" height="10" />             </g>       </pattern>                  </defs>

  Все объекты, находящиеся внутри тегов <defs> будут невидимыми, до тех пор пока вы их не вызовите командой <use xlink:href=”#id_name”> в теле SVG документа.
• далее идёт непосредственно код основных фигур SVG, позволяющий отрисовывать сами векторные изображения.
  Очень часто используется парный тег: <g> ….. </g> для объединения нескольких фигур в группу для последующих действий над ней, как над одним целым, например для: перемещения, поворота, масштабирования и т.д. Группе так же может быть присвоен уникальный номер – id = “…” для повторного использования. В свою очередь несколько групп могут быть объединены в одну.
  1 2 3 4 5 6 7 8 9 10 11 12 13 14

  <g id ="gr1+gr2" transform="translate(50,70)">           <g id = "gr1">             <rect x="30" y="50" width="120" height="50"                style="fill-opacity: 0.7; fill: red;" />             <rect x="30" y="140" width="120" height="50"                style="fill:yellow; stroke-width:3; stroke: blue;"/>             </g>             <g id="gr2">                <rect x="30" y="230" width="120" height="50"                   style="fill:none; stroke-width:3; stroke: blue;"/>                   <rect x="30" y="320" width="120" height="50"                   style="fill:none; stroke-width:8; stroke: red; stroke-opacity:0.4;"/>             </g>     </g>

Этого минимума вам вполне достаточно, чтобы начать создавать свои первые работающие файлы SVG. Мне остается собрать шаблон из всего, что выше написано.

3. Шаблон SVG файла. The SVG template file.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

<?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg  version="1.1" width="1280" height="1024"         viewBox="0 0 1280 1024"      baseProfile="full"      xmlns="http://www.w3.org/2000/svg"      xmlns:xlink="http://www.w3.org/1999/xlink"      xmlns:ev="http://www.w3.org/2001/xml-events">                        <title>My first SVG file</title>      <desc>        Red and yellow rectangles.        The yellow rectangle has a blue frame.      </desc>                             <defs>                        </defs>                <g id = "gr1">                 <rect x="30" y="50" width="120" height="50"                    style="fill-opacity: 0.7; fill: red;" />                 <rect x="30" y="140" width="120" height="50"                    style="fill:yellow; stroke-width:3; stroke: blue;"/>                 </g>              </svg>

В шаблоне внутри группы я разместил код для отрисовки двух прямоугольников, замените его своим кодом.

следующая: Эти странные тэги SVG ⇛