Мне было интересно, о файлах SVG. Я знаю, что это набор векторов, определяемых путевыми тегами в XML, поэтому почему он имеет ширину и высоту в пикселях в теге svg и что если мы удалим эти измерения?
11
Ширина и высота имеют значение только при viewBoxустановке. Без этого атрибута вы можете безопасно удалить ширину и высоту. Он всегда будет отображаться в масштабе, в котором он был нарисован. Если a <rect>был установлен шириной 10px и высотой 20px, он будет отображаться в этом масштабе 10x20 с шириной или высотой или без нее, когда viewBox не установлен.
Если viewBoxатрибут установлен, вы можете использовать ширину и высоту, чтобы отрегулировать исходный масштаб вверх или вниз.
Без ширины и высоты, но с установленным viewBox, это позволит svg масштабироваться бесконечно, что может быть или не быть желаемым поведением. На адаптивной HTML-странице это часто желательно. Он будет увеличиваться или уменьшаться, чтобы соответствовать ограничивающему контейнеру.
Это одно и то же
<svg width="240" height="240" xmlns="http://www.w3.org/2000/svg">
<svg xmlns="http://www.w3.org/2000/svg">Это удваивает исходный масштаб.
<svg viewBox="0 0 120 120" width="240" height="240"
xmlns="http://www.w3.org/2000/svg">Это позволяет бесконечное масштабирование
<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">