Технология Scalable Vector Graphics (SVG) от w3.org

Ссылка http://www.w3.org/2000/svg является URL-адресом, который обращается к сайту W3C (World Wide Web Consortium) и указывает на раздел SVG (Scalable Vector Graphics) этого сайта. SVG - это язык разметки, который используется для описания графических элементов векторных изображений.

SVG позволяет создавать графику с использованием векторных объектов, которые могут быть масштабированы без потери качества. Это делает SVG идеальным выбором для создания интерактивных веб-графиков, диаграмм, иконок, логотипов и многого другого. Он также поддерживает анимацию и манипуляцию элементами с помощью JavaScript.

Давайте рассмотрим примеры кода на SVG.

Пример 1: Создание простой формы SVG элемента:

<svg width="200" height="200">
  <rect x="50" y="50" width="100" height="100" fill="blue" />
</svg>

Этот код создает прямоугольник (rect) с координатами x=50, y=50, шириной 100 и высотой 100. Прямоугольник будет заполнен синим цветом.

Пример 2: Анимация SVG элемента:

<svg width="200" height="200">
  <circle cx="100" cy="100" r="50" fill="red">
    <animate attributeName="r" from="50" to="25" dur="2s" repeatCount="indefinite" />
  </circle>
</svg>

Этот код создает круг (circle) с координатами cx=100, cy=100 и радиусом r=50. Круг будет заполнен красным цветом. Атрибут animate позволяет анимировать радиус круга от 50 до 25 за 2 секунды. Атрибут repeatCount="indefinite" указывает на бесконечное повторение анимации.

Пример 3: Использование JavaScript для манипуляции SVG элементами:

<svg id="my-svg" width="200" height="200">
  <rect id="my-rect" x="50" y="50" width="100" height="100" fill="green" />
</svg>

<script>
  let rect = document.getElementById('my-rect');
  rect.addEventListener('click', function() {
    rect.setAttribute('fill', 'yellow');
  });
</script>

В этом примере мы задаем идентификаторы SVG элементам, чтобы обращаться к ним через JavaScript. Затем мы добавляем обработчик события нажатия мышки на прямоугольник. Когда прямоугольник будет нажат, его атрибут fill будет изменен на желтый цвет.

В заключение, SVG предоставляет богатые возможности для создания векторной графики и анимации на веб-страницах. Он легко интегрируется с HTML и JavaScript, что делает его мощным инструментом для разработки интерактивных и привлекательных веб-сайтов. Зная основы SVG и умение использовать его синтаксис и функциональность, вы сможете создавать сложные и креативные веб-графики.