Атрибут width тега <svg>

Описание

Атрибут width определяет ширину элемента <svg>. Этот атрибут задаёт горизонтальный размер SVG-изображения в пикселях или других единицах измерения.

Пример использования:
<svg width="200" height="100"> <rect width="100%" height="100%" fill="#3498db"/> </svg>

Допустимые значения:

Тип значения Пример Описание
Пиксели width="300" Ширина в px (по умолчанию)
Проценты width="100%" Относительно родительского элемента
Единицы CSS width="5cm" Можно использовать em, rem, vw и др.

Особенности работы:

  • Без указания width SVG может сжаться до 0px
  • Лучше всегда указывать вместе с height
  • Влияет на соотношение сторон изображения
  • Может быть переопределён CSS

Пример с адаптивной шириной:

<svg width="100%" viewBox="0 0 200 100"> <circle cx="50" cy="50" r="40" fill="#e74c3c"/> </svg>

Рекомендации:

  • Для адаптивности используйте % или viewBox
  • Сохраняйте пропорции с height
  • Для иконок используйте фиксированные размеры (24px, 32px)
  • Тестируйте на разных экранах

Ограничения:

  • Без viewBox может привести к искажениям
  • Минимальная ширина 1px
  • Проценты работают только если родитель имеет размер

Примечание: Для сложных SVG-графиков комбинируйте width с viewBox для правильного масштабирования.