你应该为你的网页设计使用 SVG 文件吗？

随着数字设计和 Web 开发领域的发展，我们用来创建和交付工作的文件格式也在不断发展。 特别是，矢量图形越来越受欢迎，这要归功于它们的小文件大小、分辨率独立性以及对动画和交互性的支持。 最流行的矢量图形格式之一是 SVG（可缩放矢量图形）。 SVG 文件是基于 XML 的，这意味着它们可以在文本编辑器或 Adob​​e Illustrator 等程序中轻松编辑。 它们还可以在不降低质量的情况下缩放到任意大小，使它们成为响应式网页设计的理想选择。 那么，您应该将照片保存为 SVG 文件吗？ 让我们来看看优缺点。 优点：文件大小小：由于 SVG 文件是基于矢量的，因此它们通常比 JPG 或 PNG 等光栅图像文件小得多。 当您处理大图像时，或者当您需要在网站或应用程序中快速加载大量图像时，这可能是一个主要优势。 与分辨率无关：SVG 图像可以以任何分辨率显示，从非常小到非常大。 这是响应式设计的理想选择，您需要图像在任何设备（从手机到桌面显示器）上看起来都很清晰。 可以制作动画：SVG 图像可以使用 CSS 或 JavaScript 制作动画。 这可能是为您的网页设计添加一些交互性的好方法。 缺点：并非所有浏览器都支持 SVG：虽然 SVG 越来越受欢迎，但并非所有 Web 浏览器都支持它。 特别是，旧版本的 Internet Explorer 不支持 SVG。 因此，如果您需要支持 IE9 或更早版本，您可能需要为图像使用不同的格式。 可能更难编辑：SVG 文件是基于 XML 的，这意味着它们可能比其他文件格式更难编辑。 如果您不习惯使用代码，您可能会发现使用 PNG 或 JPG 等格式更容易。

Treehouse 社区是一个由从事技术工作的人员组成的社区，从设计师到程序员，各种技能水平的人都希望建立联系并了解更多信息。 此时此刻，来自全国各地的数千名学生和校友是社区的一部分。 访问数千小时的内容，以及志同道合的个人社区。 您的免费试用现已开放。 该技术可以生成图像的多个版本（视网膜、视网膜高清等）。 使用 CSS 或 Javascript 更改页面上笔触的颜色和 alpha 与使用 javascript 设置 SVG 动画一样简单。 有关详细信息，请参阅我可以使用...吗，尚未在所有浏览器上得到完全支持。

可缩放矢量图形是可缩放的，可以缩放到任何分辨率，除了上面列出的七大优势之外，它们还非常适合用于 JPEG、PNG 和 GIF 文件。 由于图像的矢量性质，它们的文件大小通常比位图图像小得多。 CSS 可用于设置嵌入式 SVG 的样式。

Svg 比 Jpeg 好吗？

这个问题并没有真正明确的答案，因为它取决于你在寻找什么。 SVG（可缩放矢量图形）是一种矢量图像格式，非常适合带有简洁线条的徽标或插图。 JPEG（联合图像专家组）是一种最适合照片的光栅图像格式。

使用压缩引擎时，JPG 或 PNG 均可用于图像格式。 因为矢量图形的设计方式几乎可以应用于任何类型的图像，所以无论大小如何，它们看起来都很棒。 PNG 格式，也称为可移植网络图形，提供了 JPG 所没有的东西：透明度。 最常用的图像格式可能是 JPEG，即联合图像专家组。 JPG 能够将图像从 0% 压缩到 100%（无压缩），反之亦然。 具有大量颜色、照片和任何其他需要裁剪的图像通常以 JPG 格式打印。

在某些方面，我更喜欢 SVG 格式而不是 JPG 格式。 如果您需要节省网站或文件服务器上的空间，请使用 SVG 文件，因为它们通常比 JPG 或 PNG 文件小得多。 SVG 文件还具有比 JPG 或 PNG 文件更广泛的功能，使它们对于特定的图像格式更加通用。 这完全取决于个人。 如果您喜欢 JPG 或 PNG 文件的结果，则无需切换到 SVG 格式。 如果您更喜欢可以处理更广泛情况的更通用的图像格式，您可能需要考虑 SVG 格式。

什么时候不应该使用 Svg？

因为矢量图形基于位图，所以它不能像照片那样用于具有许多精细细节和纹理的高质量图像。 SVG 中的简单形状和颜色非常适合徽标、图标和其他平面图形。

最流行的网络矢量格式是 SVG（可缩放矢量图形）。 在浏览器中缩小或放大 SVG 图像时，它会保持其矢量质量。 在某些图像格式中，可能需要额外的资产/数据来解决分辨率问题。 此文件类型是 W3C 标准。 它与其他开放标准语言和技术兼容，例如 CSS、JavaScript、CSS 和 HTML。 它不像其他格式那么大，因此尺寸更小。 PNG 图形比 sVG 图形重 50 倍，后者既重又薄。

XML 和 CSS 用于创建不需要来自服务器的图像的 SVG。 尽管徽标和图标等 2D 图形是这种格式的重要资产，但应避免使用更详细的图像。 虽然大多数现代浏览器都支持它，但它可能不适用于较旧的 IE8 和 IE11。

SVG 不像其他文件格式那样流行的原因有很多。 问题源于这样一个事实，即它不像旧浏览器和设备那样得到广泛支持。 此外，由于增加了正确显示 svg 文件的难度，将 svg 文件上传到您的网站可能很困难。 尽管它是一种通用的文件格式，但考虑它是否适合您的项目很重要，因为它可以用于多种用途。

Svg 图像的优势是什么？

SVG 最显着的优势之一是它解决问题的能力。 因此，与 JPG 和 PNG 等文件类型不同，无论屏幕大小或分辨率如何，SVG 文件都能保持其质量。

光栅图像和矢量图像是最常用的图像类型。 基于像素的图像具有定义的分辨率。 如果按比例放大，它会出现像素化或颗粒状。 您可以根据需要放大和缩小图像，而不会在使用 SVG 的过程中降低质量。 使用 SVG 优化文件时，可能会出现较小的文件大小。 这在使用高分辨率显示器时很有用。 您可以使用内联 SVG 提高网站的性能。 CSS 允许您控制各种属性，包括填充颜色、描边颜色、大小调整等。

Svg 的诸多好处

此外，由于 SVG 是 W3C 的推荐标准，您可以确信绝大多数浏览器都支持它。 此外，由于 XML 用于生成图形，您可以根据需要轻松地自定义和设计它们的样式。
一般来说，SVG 是需要通用性和可扩展性的图形的绝佳选择，也是 W3C 推荐的将适用于绝大多数浏览器的图形。

Svg 与 Jpg

JPEG 和.VG 是两种可用于存储图像的图像格式。 JPEG 是一种使用有损压缩算法来压缩文件的图像格式，而 SVG 是一种基于文本的图像格式，它使用数学结构来表示文件并且可以缩放到任意大小。

它使用可缩放矢量图形 (SVG) 在 XML中表示图像及其元素，其中可以包括图像、绘图和图形。 SVG 图像的压缩和拉伸都可以在不影响图像质量的情况下执行。 PDF 文档是一种可用于提供文本或文本和图形的电子图像的文件类型。 联合图像专家组 (JPAG) 开发了 JPEG 和 JPG 格式。 JPG 文件被压缩成较小的文件大小以使图像更小。 PNG 文件是一种开放格式，可替代 GIF 文件格式。 这种格式提供更准确的图形，错误更少，颜色范围更广，而不会降低质量。

网站的 Svg 或 Png

由于它们的透明度，PNG 和 svg 是图形和徽标的绝佳选择。 重要的是要注意，PNG 文件是基于光栅的透明文件的最佳选择之一。 在处理像素和透明度时，PNG 是 sVG 的更好替代品。

便携式网络图形 (PNG) 文件格式由栅格数据组成。 尽管分辨率很高，但它们可以处理 1600 万种颜色，具有无损压缩和显示透明度。 可缩放矢量图形 (SVG) 是一种基于复杂数学网络的形状、线条、点和算法的数学表示。 他们与其他人的区别是什么？ 换句话说，可以将 SVG 压缩为更小的文件大小，而无需额外费用以满足其定义、细节或质量。 您可以放大或缩小它们而不会降低质量，因为它们是矢量文件。 因为 PNG 和 SVG 都支持透明度，所以它们是在线设计徽标和图形的绝佳选择。

有许多优秀的打印矢量文件，因此您的决定将由文件决定。 PDF 是印刷使用最广泛的矢量格式。 PNG 本质上是 GIF 的下一代，其中图像以图像格式呈现。 矢量文件（包括 SVG）的大小没有限制。

PNG比。 Svgs：哪种图像格式最好？

图像没有通用的最佳格式，因此根据情况使用的最佳格式是您在此处选择的格式。 大多数 PNG 和 SVG 更适合在网络上显示，而不是在印刷材料中使用。