Wat is het verschil tussen vectorafbeeldingen (SVG) en rasterafbeeldingen? Hoe wordt SVG gebruikt in webontwikkeling?
sobes.tech AI
Antwoord van AI
Векторная графика (SVG) описывает изображения с помощью математических формул — линий, кривых, многоугольников. Это позволяет масштабировать изображение без потери качества, так как оно перерисовывается заново при любом размере.
Растровая графика состоит из пикселей — маленьких точек с фиксированным цветом. При масштабировании растрового изображения качество ухудшается, появляются пикселизация и размытие.
В веб-разработке SVG используется для иконок, логотипов, диаграмм и анимаций, где важна четкость на любых разрешениях. SVG можно вставлять прямо в HTML как тег <svg>, стилизовать через CSS и управлять через JavaScript, что делает его очень гибким для интерактивных и адаптивных интерфейсов.
Пример вставки SVG в HTML:
<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>