html5,svg
您的位置: 主页 > web前端文章 > html5 >

HTML5 SVG【访问量:88】

可缩放矢量图形(SVG)是一种基于XML的图像格式,用于为Web定义基于二维矢量的图形。矢量图像可以放大或缩小到任何程度而不会丢失图像质量。 SVG图像及其行为在XML文件中定义 - 这意味着可以使用任何文本编辑器创建和编辑SVG图像。使用SVG优于JPEG,PNG,GIF等其他图像格式的其他优点 SVG图像可以被搜索,索引,脚本和压缩。 SVG图像可以使用JavaScript实时创建和修改。 SVG图像可以以任何分辨率高质量打印。 SVG内容可以使用内置的动画元素进行动画。 SVG图像可以包含指向其他文档的超链接。

提示:矢量图像由数学定义的一组固定形状组成,而位图或光栅图像由称为像素的固定点组成。

将SVG嵌入HTML页面 您可以使用HTML5 <svg>元素将SVG图形直接嵌入到文档中。

<!DOCTYPE html>
<html  lang = “en” >
<HEAD>
    <meta  charset = “UTF-8” >
    <title> HTML5 SVG </ title>
</ HEAD>
<BODY>
    <svg  width = “300”  height = “200” >
        <text  x = “10”  y = “20”  style = “font-size:14px;” >
            您的浏览器支持SVG。
        </文本>
        抱歉,您的浏览器不支持SVG。
    </ SVG>
</ BODY>
</ HTML>

注意: Firefox,Chrome,Safari,Opera和Internet Explorer 9+等所有主流现代浏览器都支持内联SVG渲染。

SVG和画布的区别

HTML5引入了两个图形元素Canvas和SVG,用于在Web上创建丰富的图形,但它们有着根本性的不同。下表总结了这两个元素之间的一些基本差异,这将有助于您理解如何有效且适当地使用Canvas和SVG元素。

SVG帆布
基于矢量(由形状组成)基于栅格(由像素组成)
多个图形元素,成为DOM的一部分<img>行为类似的单个HTML元素
通过脚本和CSS修改仅通过脚本进行修改
用更少数量的物体或更大的表面或两者都可以获得更好的性能用更小的表面或更大数量的物体或两者都可以获得更好的性能
更好的可扩展性 - 可以在任何分辨率下以高质量打印可扩展性差 - 不适合在更高分辨率下打印



2018-04-04
上一篇:HTML字符编码
下一篇:没有了
匿名评论

最新推荐