2021-05

27

网页制作要避免使用哪种SVG模式
  • 类型:网页制作
  • 编辑:尼高GARY
  • 来源:https://www.szniegoweb.com
  • 你当前位置:首页 - 尼高动态 - 网页制作
    网页制作时我们要考虑展现的最完美模式,在比较操作系统,浏览器和屏幕阅读器的不同组合时,发现我们应该避免使用哪种SVG模式,以及哪些模式最具有包容性。


    网页制作

    尽管可伸缩矢量图形(SVG)于90年代后期首次推出,但由于其极高的灵活性,高保真度和相对轻便的特性,在过去的十年中,由于可扩展矢量图形(SVG)在带宽和性能比以往任何时候都更为重要,因此受到了广泛的欢迎。 。JavaScript的进步以及@ prefers-color-scheme和@ prefers-reduced-motion之类的CSS媒体查询的引入已经扩展了SVG的功能,超出了它们最初在网站上简单显示矢量图像的用例。

    随着SVG技术的发展,我们对我们如何设计和开发SVG的理解也需要提高。进步的一部分包括考虑此类设计和代码对实际人类(也就是我们的最终用户)的影响。当然,以下示例并不是要详尽地列出数字领域中使用的所有可能模式,但是它们确实突出了您可能会遇到的一些更流行或无处不在的SVG模式。继续阅读以发现应该避免使用哪些SVG模式,以及哪些模式最具有包容性!

    第一组四个模式利用<img>链接到SVG文件的标签。对于您的网站,应用程序或其他数字产品上的基本,简单的图像,这是一个不错的选择。尽管使用此模式的缺点是您无法轻松地将许多视觉元素或动画作为嵌入式SVG进行控制,但此模式应该可以整体上呈现更亮,更快的图像,并可以更轻松地维护在多个位置使用的SVG。

    第二组四个模式将<svg>标记与内联SVG文件一起使用。尽管将SVG代码直接添加到标记中可能会导致页面加载速度变慢,但是可以通过对图像的视觉元素或动画进行更多控制来弥补这种低效。通过将SVG直接添加到HTML,在向屏幕阅读器用户提供图像信息时,您还有更多选择。

    第四组模式的最后一组使用<svg>带有内联SVG文件的标签,与第二组相似。但是,在这种情况下,由于图像的复杂性,我们将使用附加信息来扩展简单的替代描述。