W3C标准（三）：网页设计与应用（Graphics）-煤油灯科技

W3C标准（三）：网页设计与应用（Graphics）

煤油灯科技2022-05-18 09:00

网络不仅仅是文字和信息，它还是一种表达艺术创造力、数据可视化和优化信息呈现的媒介，以满足不同受众的不同需求和期望。在网站上使用图形增强了用户的体验，W3C拥有几种不同的互补技术，它们与HTML和脚本一起工作，为网页和Web应用程序的创建者提供他们所需的工具，以提供其内容的最佳表现。在下面了解更多：

这段介绍性文字是w3.org的测试版的样板。我们的目的是邀请社区来开发这个模板并帮助提供有用的内容和链接。如需更完整的示例，请参阅HTML和CSS的页面。

什么是图形？

Web图形是在网站上使用的视觉表现，用于增强或实现想法或感觉的表达，以便接触网站用户。图形可以给用户带来娱乐、教育或情感上的影响，并且对品牌的力量、插图的清晰性和界面的易用性至关重要。

图形的例子包括地图、照片、设计和图案、家谱、图表、建筑或工程蓝图、柱状图和饼状图、排版、示意图、线条艺术、流程图和许多其他图像形式。

图形设计师有许多工具和技术可供他们使用，从印刷品到Web开发，W3C提供了许多可用于在开放Web平台上创建内容的底层格式。

图形的用途是什么？

图形用于从增强Web的外观到作为成熟的Web应用程序的演示和用户交互层的所有方面。

不同的图形用例需要不同的解决方案，因此有几种不同的技术可用。照片最好用PNG表示，而交互式线条艺术、数据可视化甚至用户界面都需要SVG和Canvas API的强大功能。CSS的存在是为了增强HTML或SVG等其他格式。WebCGM满足了许多行业对技术插图和文档的需求。

什么是PNG？

可移植网络图形（PNG）是一种静态文件格式，用于无损、可移植、压缩良好的光栅图像（位图）的存储和交换。它具有丰富的色彩控制功能，支持索引颜色、灰度、真彩色和alpha通道透明度。PNG专门为Web设计，具有流式传输和渐进式渲染能力。它在Web浏览器、图形制作工具、图像工具包和创意工具链的其他部分中得到普遍支持。PNG文件的文件扩展名为“.PNG”或“.png”，应使用媒体类型“image/png”进行部署。PNG图像可以与HTML、CSS、SVG、Canvas API和WebCGM一起使用。

什么是SVG？

可扩展矢量图形（SVG）就像图形的HTML。它是一种标记语言，用于描述图像或Web应用程序的所有方面，从形状的几何形状，到文本和形状的样式，再到动画，再到包括视频和音频在内的多媒体演示。它是完全交互的，包括一个可编写的DOM以及声明性的动画（通过SMIL规范）。它支持广泛的视觉功能，如梯度、不透明度、过滤器、剪切和屏蔽。

SVG的使用允许完全可扩展的、平滑的、可重复使用的图形，从增强HTML页面的简单图形，到完全交互式的图表和数据可视化，再到游戏，再到独立的高质量静态图像。大多数现代浏览器都原生支持SVG（带有可以在所有浏览器上使用的插件），并且在移动设备和机顶盒上广泛使用。所有主要的矢量图形绘制工具都可以导入和导出SVG，也可以通过客户端或服务器端的脚本语言生成。

什么是CSS？

层叠样式表（CSS）是描述网页表现的语言，包括颜色、布局和字体信息。它可用于增强HTML和SVG的图形方面。你可以在HTML和CSS的页面上阅读更多内容。

什么是Canvas API？

Canvas API 是一种客户端脚本技术，允许丰富地创建或更改光栅图像（位图）。它使用基于矢量的编程方法来创建形状、渐变和其他图形效果，由于它没有DOM，所以执行起来非常迅速。专门的脚本编写者可以使用 Canvas API 单独或集成到 HTML 或 SVG 中开发游戏甚至功能齐全的应用程序。大多数现代浏览器（脚本库将支持扩展到所有主要浏览器），甚至在某些移动设备上都原生支持它。

什么是WebCGM？

Web计算机图形元文件（WebCGM）是CGM的Web配置文件，CGM是用于矢量和复合矢量/光栅图片定义的ISO标准。CGM在技术插图、交互式电子文档、地球物理数据可视化等应用领域有很大的影响力，并广泛用于汽车工程、航空和国防工业等领域。WebCGM具有许多与SVG相同的图形特征。

示例

作为 SVG 图像文件的一个简单示例，下面是一个带有渐变的圆圈，以使其具有 3D 外观：

<defs>

</radialGradient>

</defs>

</svg>

原文链接：https://www.w3.org/standards/webdesign/graphics

---煤油灯科技victorlamp.com翻译整理---

上一篇：大数据、人工智能、深度学习和物联网如何推动现代医疗

下一篇：Graph Day：旧金山最大的 Web3 会议