СКРИПТЫ alt phpjshtmlcssblog
ТЕГИ:
php (267)
js (136)
html (133)
css (96)
html tags (58)
edit text (37)
jquery (36)
form html (29)
php array (28)
foto (23)
fonts (22)
forum (19)
atom (17)
board (17)
hosting (17)
html book (17)
Показать еще :
svg (16)
js method (16)
php file (15)
ruweb.net (15)
color (14)
osclass (13)
htaccess (13)
path (12)
table (12)
input (11)
icon (11)
info (11)
online (11)
yandex (11)
php date (11)
notepad (11)
js delete (11)
php img (10)
url (10)
jsphp (10)
form (8)
task (7)
cookie (7)
comment (7)
php url (7)
click (6)
ftp (6)
js url (6)
value (5)
reg.ru (5)
mb (5)
adminka (5)
js id (4)
bbcode (4)
js form (4)
select (4)
search (4)
js copy (4)
vk (3)
captcha (3)
js time (3)
iframe (3)
vs code (3)
sitemap (2)
js post (2)
browser (2)
console (2)
seo (2)
tag hr (2)
ukoz (2)
header (1)
archive (1)
smile (1)
numbers (1)
ssl (1)
books (1)

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

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

Давно надо было начать серию статей о "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‘ и код ‘svg‘.

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

    2).

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

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

    Чем отличается  картинка с разрешением ‘.svg‘ и код ‘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‘ и когда на странице
    Вывод картинки ‘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" нет! Это одно и тоже!

Пользуйтесь на здоровье! Не забудьте сказать спасибо

Сообщение системы комментирования :

01.09.2021

Форма пока доступна только админу... скоро все заработает...надеюсь...

Последние комментарии :
Марат :
10.10.2021 17:20
Добавлен новый смайл
подробнее.
Марат :
05.10.2021 26:37
Страница sitemap.html восстановлена. Но будут вводиться только страницы…
подробнее.
Марат :
04.10.2021 38:22
Добавил несколько вариантов поставить смайл на страницу своего сайта! 3 варианта! Кроме варианта скачать…
подробнее.
Марат :
17.09.2021 28:02
Установка Яндекс поиск на сайт! Контент обновлен на 100%. Такое ощущение, что старый текст не я…
подробнее.
Марат :
07.09.2021 23:21
Частенько приходится исправлять ошибки и вот...как-то я обратил внимание на надпись: "нажми ctrl enter" на сайте и…
подробнее.
Марат :
23/07/2021 10:58
Сам офигеваю...
подробнее.