只需将 viewBox 设置在您的
如何缩放 SVG 图像？
如何调整 SVG 图像的大小
- 以 XML 格式更改宽度和高度。 使用文本编辑器打开 SVG 文件。 它应该显示如下代码行。 …
- 2. 使用“背景尺寸” 另一种解决方案是使用 CSS。
如何修复 SVG 大小？
2答案
- 给你的 SVG 元素一个固定的高度。 如果你不这样做，元素的高度将与宽度成比例地变化。
- 调整 viewBox 以裁剪到内容的高度。
- 修复您的 preserveAspectRatio 值以具有正确的区分大小写的值，例如 xMinYMin （不是 xMinYmin ）。
5.02.2015
SVG 文件是否可扩展？
SVG 代表可缩放矢量图形，它是一种文件格式，可让您在网站上显示矢量图像。 这意味着您可以根据需要上下缩放 SVG 图像而不会损失任何质量，使其成为响应式网页设计的绝佳选择。
如何使 SVG 文件具有响应性？
响应式 SVG 的 10 条黄金法则
- 正确设置工具。 …
- 删除高度和宽度属性。 …
- 优化和缩小 SVG 输出。 …
- 修改IE的代码。 …
- 考虑将 SVG 用于英雄文本。 …
- 为渐进式图标保留宽度和高度。 …
- 使用矢量效果保持细线。 …
- 记住位图。
19.06.2017
为什么我的 SVG 文件这么大？
SVG 文件更大，因为与 PNG 中包含的数据相比，它包含更多数据（以路径和节点的形式）。 SVG 无法与 PNG 图像相提并论。
如何压缩 SVG 文件？
如何在 WinZip 中压缩 SVG 文件
- 从文件资源管理器中选择要压缩的所有文件。
- 右键单击选定的文件。 WinZip > 添加/移动到 Zip 文件… …
- 选择您的文件选项，例如名称、位置、加密以及您想要包含的任何其他功能。
- 选择添加。
为什么 SVG 不缩放？
SVG 与位图图像（如 PNG 等）不同。如果 SVG 有一个 viewBox——就像你的样子——那么它将被缩放以适应它定义的视口。 它不会像 PNG 那样直接缩放。 因此，如果高度受到限制，增加 img 的宽度不会使图标更高。
如何使 SVG 适合父容器 100？
4答案
- 添加 width=”100%” 和 height=”100%” 属性。
- 添加值为 none 1 的 preserveAspectRatio 2 。 none 不强制统一缩放。 如有必要，不均匀地缩放给定元素的图形内容，以使元素的边界框与视口矩形完全匹配。
我可以使用 SVG 作为背景图片吗？
SVG 图像也可以用作 CSS 中的背景图像，就像 PNG、JPG 或 GIF 一样。 SVG 的所有同样令人敬畏的特性也随之而来，比如在保持清晰度的同时保持灵活性。
使用 SVG 还是 PNG 更好？
如果您要使用高质量的图像、详细的图标或需要保持透明度，那么 PNG 是赢家。 SVG 是高质量图像的理想选择，并且可以缩放到任何尺寸。
什么程序制作 SVG 文件？
制作 SVG 文件的最著名的软件可能是 Adobe Illustrator。 将位图图像制作成 SVG 文件的功能是“图像跟踪”。 您可以通过转到 Window > Image Trace 来访问工具面板。
使用 SVG 的缺点是什么？
SVG图像的缺点
- 不能支持那么多细节。 由于 SVG 基于点和路径而不是像素，因此它们无法像标准图像格式那样显示细节。 …
- SVG 不适用于旧版浏览器。 旧版浏览器，例如 IE8 及更低版本，不支持 SVG。
6.01.2016
SVG 大小重要吗？
SVG 与分辨率无关
从文件大小的角度来看，渲染图像的大小并不重要，因为这些指令保持不变。
如何更改 SVG 的颜色？
我喜欢这样做的方式：
- SVG：将 SVG 设为黑色 #000000，您想控制悬停时的颜色。
- CSS：填充：当前颜色； 标签上。
- CSS：更改 CSS 中的颜色属性以更改 SVG 的颜色（适用于过渡！）
如何使 DIVS 适合 SVG？
设置 CSS 属性 position:absolute 在你的元素使其位于内部并填充您的 div。 （如有必要，也应用 left:0; top:0; width:100%; height:100% 。）