Всех друзей поздравляем с Новым годом! Всего вам самого наилучшего! Всех благ, здоровья а материальное приложится!
СКРИПТЫ althtmlcssphpjsblog

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

Поддержи проект!!! smile

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    2).

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

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

    Чем отличается  картинка с разрешением ‘.svg‘ и код ‘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>

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

    1). Для вывода картинки с разрешением ".svg" - используется стандартный код тега img
    <img src="//dwweb.ru/__img/__svg/bell.svg">

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

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

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

    </div>

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

    Вывод картинки ‘SVG‘ и когда на странице
    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" нет! Это одно и тоже!


Последняя дата редактирования : 12.01.2021 13:37
//dwweb.ru/comments_1_5/include/img/hand_no_foto.png
no
no
Еще никто не прокомментировал! COMMENTS+   BBcode
аватар
🞨
Загрузить свой аватар
(max ширина, высота = 200px)

Подписаться + =

Счетчик в график :

Построение гравиков
Основа для графика : счетчик посещаемости.
Последние комментарии :
Марат :
08/04/2021 07:12
Сам афигеваю!
подробнее.
stream :
07/04/2021 05:56
Неплохо)
подробнее.
Марат :
24/03/2021 11:01
Да что вы!? За что обижаться то?Вы тот редкий человек, который смог написать! Вы молодец!Человек, же который не…
подробнее.
Виталий :
24/03/2021 06:05
Не стоит обижаться, люди могут не понимать что ошибка не критична. Может быть до конца не изучали…
подробнее.
Марат :
23/03/2021 02:09
Спасибо, за сообщение! В архив попал вариант, который был на тестировании и там остались некоторые…
подробнее.