渣翻 仅作为一丢丢参考 不能全信
11.3 使用网页图像
界面元素 Interface elements
Scalable vector graphics (svg) can also be useful for simple graphic shapes, icons, and small iconic illustrations without many complex effects, such as graduated fills or transparencies.
As the name suggests, svg graphics are based on mathemati- cal description of curves, points, lines, and other shapes, and can be scaled to any size without a loss of quality.
This is a powerful advantage in this transitional period in computer displays, where 72–96-ppi “conventional” or “1x” display screens are being replaced with “retina” or “2x” displays with more than 200 pixels per inch (see below for more on retina displays).
Because an svg graphic can scale independent of screen resolution, an svg graphic looks good on both kinds of displays.
- 可缩放矢量图形（SVG）也可以用于简单的图形形状、图标和没有许多复杂效果的小图标插图，例如渐变的填充或者透明度。
- 正如名字所说，SVG图形是基于对曲线、点、线和其他形状的数学描述，并且可以在不损失质量的情况下缩放到任意大小。
- 这是一个在电脑显示屏过渡时期——72–96-ppi的“传统”或者“1X”的显示屏被“视网膜”或者每英寸超过200像素的“2X”显示屏所代替 (见下文更多关于视网膜显示器)的强大的优势。
- 因为SVG图形可以独立于屏幕分辨率，所以SVG图形在两种显示器上都很好。
Sophisticated browser support for svg graphics gets better all the time, but there are drawbacks to svg as a format for more complex vector graphics such as illustra- tions.
To display a vector svg graphic on a web page the browser must render the svg into pixels, a process that takes time and can be unpredictable for very com- plex illustrations, data graphics, and maps produced in vector drawing programs like Adobe Illustrator (fig. 11.11).
Until browser support for complex vector graphics becomes more accurate and reliable, it’s best to create the illustrations in tools like Adobe Illustrator, but then to render the final results in png or jpeg graphics that can reliably capture the subtleties of shading and transparency.
- SVG图形一直被先进的浏览器所支持，但是SVG作为更复杂的矢量图形（如插图）的格式仍有缺点。
- 为了在Web页面上显示矢量SVG图形，浏览器必须将SVG渲染成像素，这是一个耗时的过程，对于矢量绘图程序如Adobe Illustrator (fig. 11.11)中非常复杂的插图、数据图形和地图来说是不可预测的。
- 直到浏览器对复杂的矢量图形的支持变得更加精确和可靠，最好是在像Adobe Illustrator 这样的工具中创建插图，然后在PNG或JPEG图形——从而能够可靠地捕捉明暗和透明度的细微差别中提供最终结果。