Перейти к основному содержимому

SVG

Векторная графика представленная в виде html-тэгов.

Аттрибут viewBox определяет расположение и размеры окна отображения SVG.

Значение атрибута viewBox — это набор четырёх чисел: min-x, min-y, width и height, — разделённых пробелами и/или запятой, которые задают прямоугольник в пользовательском пространстве, стороны которого определяют границы окна отображения элемента SVG.

Окружность​

<svg>
  <circle cx="50%" cy="50%" r="50" fill="red" />
</svg>

Прямоугольник​

<svg>
  <rect
    height="100px"
    width="150px"
    x="25%"
    y="30"
    rx="15"
    ry="10"
    fill="green"
  />
</svg>

Многоугольники​

<svg>
  <polygon points="230,30 200,60 260,60" fill="maroon" />
  <polygon
    points="70,5 90,41 136,48 103,80 111,126 70,105 29,126 36,80 5,48 48,41"
    fill="chocolate"
  />
</svg>

Эллипсы​

<svg>
  <ellipse rx="80" ry="20" cx="50%" cy="50%" fill="lightgray" />
</svg>

Линии​

<svg>
  <line x1="50" y1="50" x2="250" y2="100" stroke="deeppink" stroke-width="6" />
</svg>

Ломанные​

<svg>
  <polyline
    points="30,50 40,10 80,100 0,30 70,25 10,85"
    stroke="pink"
    stroke-width="4"
    fill="none"
  />
</svg>

SVG-спрайты​

<!-- Вставить после открывающего тэга body -->
<svg
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
>
  <symbol id="svg-icon1">...svg-код1...</symbol>

  <symbol id="svg-icon2">...svg-код2...</symbol>
</svg>

<!-- Использование через id symbol -->
<svg width="136.1px" height="75px" viewBox="0 0 136.1 75">
  <use xlink:href="#svg-icon1"></use>
</svg>

Текст​

<!-- Простой текст -->
<svg>
  <text x="10" y="30" font-family="Arial" font-size="16" fill="black">
    Привет, SVG!
  </text>
</svg>

<!-- Текст по пути -->
<svg>
  <defs>
    <path id="textPath" d="M10 50 Q50 20 90 50" fill="none" />
  </defs>
  <text>
    <textPath href="#textPath">Текст по кривой</textPath>
  </text>
</svg>

<!-- Многострочный текст -->
<svg>
  <text x="10" y="30">
    <tspan x="10" dy="0">Первая строка</tspan>
    <tspan x="10" dy="20">Вторая строка</tspan>
  </text>
</svg>

Viewbox​

<!-- Атрибуты viewBox -->
<svg viewBox="0 0 100 100">
  <!-- 100x100 область -->
  <svg viewBox="-50 -50 100 100">
    <!-- центр в 0,0 -->
    <svg viewBox="0 0 200 100"><!-- прямоугольная область --></svg>
  </svg>
</svg>

Градиенты​

<!-- Линейный градиент -->
<svg>
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:red;stop-opacity:1" />
      <stop offset="100%" style="stop-color:blue;stop-opacity:1" />
    </linearGradient>
  </defs>
  <rect width="200" height="100" fill="url(#grad1)" />
</svg>

<!-- Радиальный градиент -->
<svg>
  <defs>
    <radialGradient id="radGrad" cx="50%" cy="50%" r="50%">
      <stop offset="0%" style="stop-color:yellow;stop-opacity:1" />
      <stop offset="100%" style="stop-color:red;stop-opacity:1" />
    </radialGradient>
  </defs>
  <circle cx="100" cy="100" r="80" fill="url(#radGrad)" />
</svg>

<!-- Узоры -->
<svg>
  <defs>
    <pattern
      id="dots"
      x="0"
      y="0"
      width="20"
      height="20"
      patternUnits="userSpaceOnUse"
    >
      <circle cx="10" cy="10" r="2" fill="blue" />
    </pattern>
  </defs>
  <rect width="200" height="100" fill="url(#dots)" />
</svg>

Анимация​

<!-- Анимация движения -->
<svg>
  <circle cx="50" cy="50" r="20" fill="red">
    <animateTransform
      attributeName="transform"
      type="translate"
      values="0,0; 100,0; 100,100; 0,100; 0,0"
      dur="4s"
      repeatCount="indefinite"
    />
  </circle>
</svg>

<!-- Анимация изменения размера -->
<svg>
  <circle cx="100" cy="100" r="20" fill="blue">
    <animate
      attributeName="r"
      values="20; 50; 20"
      dur="2s"
      repeatCount="indefinite"
    />
  </circle>
</svg>

<!-- Анимация цвета -->
<svg>
  <rect width="100" height="100" fill="red">
    <animate
      attributeName="fill"
      values="red; blue; green; red"
      dur="3s"
      repeatCount="indefinite"
    />
  </rect>
</svg>

Интерактивность​

<!-- Кликабельные элементы -->
<svg>
  <circle cx="100" cy="100" r="50" fill="red" onclick="alert('Круг нажат!')" />

  <rect
    x="200"
    y="50"
    width="100"
    height="100"
    fill="blue"
    onclick="changeColor(this)"
  />
</svg>

<script>
  function changeColor(element) {
    element.setAttribute('fill', 'green');
  }
</script>

<!-- Hover эффекты -->
<svg>
  <circle
    cx="100"
    cy="100"
    r="50"
    fill="red"
    onmouseover="this.setAttribute('fill', 'blue')"
    onmouseout="this.setAttribute('fill', 'red')"
  />
</svg>

Маски​

<!-- Маска -->
<svg>
  <defs>
    <mask id="mask1">
      <rect width="200" height="200" fill="white" />
      <circle cx="100" cy="100" r="50" fill="black" />
    </mask>
  </defs>
  <rect width="200" height="200" fill="red" mask="url(#mask1)" />
</svg>

<!-- Клип -->
<svg>
  <defs>
    <clipPath id="clip1">
      <circle cx="100" cy="100" r="50" />
    </clipPath>
  </defs>
  <rect width="200" height="200" fill="blue" clip-path="url(#clip1)" />
</svg>

Фильтр​

<!-- Размытие -->
<svg>
  <defs>
    <filter id="blur">
      <feGaussianBlur in="SourceGraphic" stdDeviation="3" />
    </filter>
  </defs>
  <text x="10" y="50" font-size="24" filter="url(#blur)">Размытый текст</text>
</svg>

<!-- Тень -->
<svg>
  <defs>
    <filter id="shadow">
      <feDropShadow dx="2" dy="2" stdDeviation="2" flood-color="black" />
    </filter>
  </defs>
  <rect
    x="10"
    y="10"
    width="100"
    height="50"
    fill="red"
    filter="url(#shadow)"
  />
</svg>

Символы (спрайты)​

<!-- Определение символа -->
<svg style="display: none;">
  <defs>
    <symbol id="star" viewBox="0 0 24 24">
      <path
        d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
      />
    </symbol>
  </defs>
</svg>

<!-- Использование символа -->
<svg width="24" height="24">
  <use href="#star" fill="gold" />
</svg>

<!-- Символ с параметрами -->
<svg width="48" height="48">
  <use href="#star" fill="red" transform="scale(2)" />
</svg>