这是材料设计图标“帐户”的svg代码:
<svg viewBox="0 0 24 24">
<path d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z" />
</svg>
请注意:https://materialdesignicons.com/中的大多数图标都是高质量的svg,每个svg画布仅包含一个路径。
我阅读了有关viewBox
的一些解释,但不了解它的作用。
是否可以仅通过不带有“ viewBox”属性的CSS来调整图标的大小?
不正确的尺寸示例(图标不是64px x 64px):
svg {
width: 64px;
height: 64px;
}
<svg>
<path d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z" />
</svg>