Эта статья предназначена специально для веб-разработки, но люди, не занимающиеся веб-разработкой, также получат новую информацию. Говоря об изображениях, поговорим о «SVG». теперь я немного объясню, что я знаю и понимаю о «svg». от кода к объяснению кода. давайте обсудим книгу.
Масштабируемая векторная графика (SVG) — это удобный для Интернета формат векторных файлов. В отличие от растровых файлов на основе пикселей, таких как JPEG, векторные файлы хранят изображения с помощью математических формул, основанных на точках и линиях на сетке.
Если у вас есть подробные изображения, придерживайтесь PNG. Тем не менее, SVG лучше подходит для адаптивного веб-дизайна с поддержкой сетчатки из-за его масштабируемости и отсутствия потери качества. Кроме того, они поддерживают анимацию, в отличие от PNG, и типы растровых файлов, которые поддерживают анимацию, например GIF и APNG.
Самый простой способ просмотра файлов SVG — в веб-браузере. Поскольку SVG использует XML — текстовый язык разметки, похожий на HTML, — любой современный веб-браузер может отображать файлы SVG. Просто перетащите файл SVG в браузер, такой как Chrome, Firefox, Safari или Microsoft Edge, и изображение появится на новой вкладке.
Вот пример простого круга:
<svg height="100" width="100"> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> </svg>
Вот краткое описание:
- Элемент ‹svg› определяет контейнер для графики SVG. Он имеет атрибуты высоты и ширины, которые определяют размер контейнера в пикселях.
- Элемент ‹circle› рисует круг. Он имеет следующие атрибуты:
cx и cy : координаты центра круга относительно левого верхнего угла контейнера. - r: радиус круга в пикселях.
- Обводка: цвет контура круга.
- stroke-width: ширина границы круга в пикселях.
- fill: внутренний цвет круга.
