СКРИПТЫ
ТЕГИ:
php (325)
js (242)
html (146)
css (130)
html tags (62)
js tag (56)
jquery (42)
text (37)
js method (36)
php array (33)
js date (33)
form html (30)
online (28)
fonts (26)
link (26)
Показать еще :
ruweb.net (25)
foto (22)
php file (20)
atom (20)
forum (19)
svg (18)
input (18)
hosting (18)
php date (17)
html book (16)
php time (16)
board (16)
color (15)
js url (14)
img (14)
js events (14)
js time (14)
info (13)
select (13)
osclass (13)
htaccess (13)
notepad (13)
знак (12)
php path (12)
keyboard (12)
php img (12)
download (12)
table (12)
dw block (12)
jsphp (11)
form (11)
icon (11)
yandex (10)
mouse (10)
js delete (10)
keyframes (10)
hover (9)
dosite (8)
browser (7)
cookie (7)
comment (7)
php url (7)
php get (6)
click (6)
mysql (6)
canvas (6)
list (6)
iframe (6)
js math (5)
reg.ru (5)
adminka (5)
mb (5)
heading (5)
tag a (5)
chart (5)
search (5)
ftp (5)
year (5)
js id (5)
value (5)
base64 (4)
day (4)
нок (4)
flags (4)
week (4)
xml (4)
scandir (4)
ssl (4)
bbcode (4)
php var (4)
games (4)
console (4)
js form (4)
vk (4)
pages (4)
submit (4)
month (4)
symbols (4)
task (4)
https (3)
js hash (3)
js post (3)
domen (3)
money (3)
vs code (3)
куб (3)
js img (3)
ucoz (3)
padding (3)
captcha (3)
numbers (3)
line (3)
tag hr (2)
qr kod (2)
youtube (2)
video (2)
рся (2)
sitemap (2)
counter (2)
details (2)
prompt (2)
typeof (2)
google (2)
height (2)
arrows (2)
seo (2)
js vars (2)
smile (1)
scroll (1)
speed (1)
нод (1)
archive (1)
header (1)
windows (1)
rutube (1)
jino (1)
cursor (1)

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

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

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

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

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

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

  1. Что такое "SVG"

    Дадим определение, что такое "SVG":
    SVG - формат файла ".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/bell_2.svg">

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

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

    <img src="//dwweb.ru/__img/__svg/bell/bell_2.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" нет! Это одно и тоже!

Не благодарите, но ссылкой можете поделиться!
Временная ссылка для быстрейшей индексации : список всех квадратных корней.
Еще никто не прокомментировал! COMMENTS+   BBcode
Подписаться + =

ruweb dwweb.ru есть здесь:
Последние комментарии :
Марат :
15.08.2023 17:50
Значит в "maxv" сидит…
подробнее.
михаил :
15.08.2023 16:53
а если это сделано для диаграммы values / maxv)…
подробнее.
Марат :
17.07.2023 15:50
Спасибо за интересный вопрос! Посмотрите …
подробнее.
Александр :
17.07.2023 14:58
а как сделать чтобы при повторном клике значение value возвращалось к…
подробнее.
Марат :
30.06.2023 10:18
Спасибо за внимательность!
подробнее.
???? :
29.06.2023 15:37
Прямоугольник - это геометрическая фигура, у которой три угла…
подробнее.
Немного о ruweb.net!
Страница загружена за : 0.014851 секунд. Подробнее