透明度，因此 SVG 可以节

suraiyaislamsum

省大量文件大小。PNG 等价物比未压缩的 SVG 大 200 到 300。但是，我们可以通过将插图导出为 SVGZ 来进一步减小文件大小。 SVGZ 是 SVG 的压缩版本，非常小。事实上，Beercamp 的 SVGZ 文件比 PNG 文件小 900！但是，实现它们需要一些服务器配置。这可以通过一个文件轻松完成.htaccess： AddType imagesvg+xml svg svgz AddEncoding gzip svgz 复制 好处 2：灵活性  SVG 的灵活性也许是其最突出的优点。Beercamp 网站上的图形在 3D 空间中缩放以填充浏览器窗口。每个页面上还有热点，允许用户放大以获取更多详细信息。由于一切都是通过 SVG 处理的，因此无论在 3D 空间中如何操作，插图都保持清晰干净。 SVG 文件本质上是响应式的。 好处 3：独立的动。

画  Beercamp 网站上的所有 SVG 均作为背景图像实现。这有助于保持标记干净，并允许在多个位置重复使用图像，例如弹出片段。然而，这意味着我们失去了对每个节点的 DOM 访问。那么，如果我们需要在背景 SVG 上添加一些动画怎么办？ SVG 允许我们在文件本身中定 购买电话号码列表 义动画。最终 Beercamp 网站中的所有弹出图像都是静态的，但早期版本以动画啤酒气泡为特色。为了提高某些功能较差的浏览器的性能，这些内容被删除了。然而，SVG 动画在 WebKit 中运行得非常流畅。 SVG 动画不像它的 CSS 同类那样大肆宣传，但它的功能同样强大。在一个元素中，我们可以添加一个动画节点来指定典型的动画设置：属性、值、开始时间、持续时间、重复计数等。下面是 Beercamp 气泡之一的摘录。 复制 要点5：实验虽。



然混乱但很重要  现在实用的花絮已经不再赘述，我想谈谈实验。 开发响应式、跨平台、跨浏览器、优雅降级、语义完美、逐步增强、_______、_______ 和 _______（填写即将出现的流行语的空间）的网站很容易陷入现实。这些技术对于生产网站来说非常有用，可以确保覆盖范围和一致性，但它们也会限制我们的创造力。 我将是第一个承认这一点的人：Beercamp 网站有问题。浏览器支持有限，可用性有待提高。然而，该网站是一个实验。它的目的是探索可能性，而不是满足实用性。 我们的行业正在出现一种教条——上面的流行语就是它的教条。实验使我们能够超越教条进行思考。这是一次美妙的练习，可以满足我们的好奇心，磨练我们的才能，并最终推动我们的行业发展。如果您没有以某种身份进行。