Давай нарисуем что то типа флага и по порядку расскажем - как это было сделано. И начинаем мы с самого тэга svg. Обычный ни чем не привлекательный тэг, но со своими атрибутами, которые обязательны для нашего применения
<svg version="1.1" baseProfile="full"
Эти атрибуты говорят браузеру, каая версия используется в данном случае, а это версия 1.1, и то что нужно использовать базовый DTD, в полном объеме.
xmlns="http://www.w3.org/2000/svg"
Эта строчка в головном тэге говорит об том, какое пространство имен нужно использовать. И она так же обязательна. А вот далее это атрибуты на усмотрение разработчика.
width="200" height="160">
В даном примере мы жестко здали размер отборажаемого объекта. Если этого не указать, то размеры окна прорисовки будет выбрана из по-умолчанию. Он имеет начения : width=100%, height=150px. Поэтому критичным для отображения здесь размер по высоте и его нажо задавать. Главное отличие от HTML - это то что размеры по-ширине и высоте не связаны пропорциональностью с исходником, т.е не исчисляются автоматически относительно заданного
<rect width="100%" height="100%" fill="red" />
Заполняем поле рисунка, а оно прямоугольник - красным цветом. Заметь здесь многии систематические атрибуты стиль-шита используются, в явном виде, как прямые атрибуты. Причем многии, либо полная копия, либо частичны, либо внове. Здесь специальным атрибутом fill, задается цвет поля, как HTML-background.
<circle cx="100" cy="80" r="70" fill="green" />
В центре поляны рисуем круг - с радиусом, и так же с цветом заполнения
<text x="100" y="100" font-size="50" text-anchor="middle" fill="white">SVG</text>
И в середине круга надпись белого цвета, ориентированная относительно центра, но с типовой базовой линией, и поэтому координата по Y далье центра поля на размер ее положения.
</svg>
Ну и закрываем нашим тегом. Вот и все. Как видите рисунок достаточно прост. и легко реаллизуем простым текстом, без прмменения емкостных растровых изображений.
