Формат картинки svg что это

Что такое svg, svg - это одновременно код и картинка в формате svg. Чем отличается svg от других форматов картинок?

Давно надо было начать серию статей о "SVG" - что это такое, и почему это лучше чем другие форматы картинок!?

С примерами! И подробным описанием!

"SVG" - формат - картинка или код!?

1. Что такое "SVG"
2. Вывод картинки "SVG" и когда на странице

Что такое "SVG"

Дадим определение, что такое "SVG":

SVG - формат файла ".svg" «лёгкий» и масштабируемый. С ними можно работать, как с обычным изображением. И данный тип изображения можно открыть в редакторе "svg" и вы получите код "xml".

Как расшифровывается аббревиатура SVG

SVG (от англ. Scalable Vector Graphics — масштабируемая векторная графика) — язык разметки масштабируемой векторной графики, созданный Консорциумом Всемирной паутины (W3C) и входящий в подмножество расширяемого языка разметки XML, предназначен для описания двумерной векторной и смешанной векторно/растровой графики в формате XML.

Чем отличается картинка с разрешением ".svg" и код "svg".

Все очень просто! Это одно и тоже, только в разном виде! Сейчас мы разберемся!

1).

У нас есть svg картинка с разрешением(соответственно .svg), которая доступна по адресу, нажмите, и посмотрите :

//dwweb.ru/__img/__svg/bell/bell_2.svg

Перед вами должна открыться такая картинка:



Обычная стандартная картинка, которая выглядит как картинка и ведет себя как картинка, но только с разрешением svg.

2).

И следующим шагом, нажмите по открытой картинке сочетание клавиш ctrl + U

Если мы посмотрим на код, который перед нами открылся - мы видим код "svg", обращая выше внимание, сто колесо прокрутки очень длинно получилось, что означает там много кода!



Весь код вот он:

<?xml version="1.0" ?><svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><title/><g id="bell"><path d="M29.78,24.37l-3.65-4.48L26,12a1,1,0,0,0,0-.16C24.85,5.58,21.21,2,16,2,10.5,2,6.08,6,5,11.82A1,1,0,0,0,5,12l-.13,8L2.14,24.48a1,1,0,0,0,0,1A1,1,0,0,0,3,26h9a4,4,0,0,0,8,0h9a1,1,0,0,0,.9-.57A1,1,0,0,0,29.78,24.37ZM16,28a2,2,0,0,1-2-2h4A2,2,0,0,1,16,28ZM4.77,24l2-3.24a1,1,0,0,0,.14-.5L7,12.1C7.91,7.25,11.52,4,16,4c5.63,0,7.43,5,8,8.1l.14,8.16a1,1,0,0,0,.22.62L26.9,24Z"/></g></svg>




Вывод картинки "SVG" и когда на странице

1). Для вывода картинки с разрешением ".svg" - используется стандартный код тега img

<img src="//dwweb.ru/__img/__svg/bell/bell_2.svg">

Давайте ограничим высоту и ширину, картинки поместив его в див с размерами 50 на 50, а то эта картинка пол экрана будет занимать...:

<div style="width: 50px; height: 50px;">

<img src="//dwweb.ru/__img/__svg/bell/bell_2.svg">

</div>

И давайте выведем данный код прямо здесь:


2).

Код тоже обрамим этим же дивом с этими же размерами:

<div style="width: 50px; height: 50px;">

<?xml version="1.0" ?><svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><title/><g id="bell"><path d="M29.78,24.37l-3.65-4.48L26,12a1,1,0,0,0,0-.16C24.85,5.58,21.21,2,16,2,10.5,2,6.08,6,5,11.82A1,1,0,0,0,5,12l-.13,8L2.14,24.48a1,1,0,0,0,0,1A1,1,0,0,0,3,26h9a4,4,0,0,0,8,0h9a1,1,0,0,0,.9-.57A1,1,0,0,0,29.78,24.37ZM16,28a2,2,0,0,1-2-2h4A2,2,0,0,1,16,28ZM4.77,24l2-3.24a1,1,0,0,0,.14-.5L7,12.1C7.91,7.25,11.52,4,16,4c5.63,0,7.43,5,8,8.1l.14,8.16a1,1,0,0,0,.22.62L26.9,24Z"/></g></svg>

</div>

И далее разместим этот код прямо здесь:

Какой вывод!?

Никакой разницы между расширением ".svg" и "кодом svg" нет! Это одно и тоже!