美文网首页
HTML5 内联 SVG

HTML5 内联 SVG

作者: 龍飝 | 来源:发表于2018-03-20 10:09 被阅读6次

    什么是SVG?
    1.SVG 指可伸缩矢量图形
    2.SVG 用于定义用于网络的基于矢量的图形
    3.SVG 使用XML格式定义图形
    4.SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
    5.SVG 是万维网联盟的标准

    SVG 优势
    与其他图形格式相比(比如 JPEG GIF),使用SVG 的优势在于:
    1.SVG 图像可通过文本编辑器来创建和修改
    2.SVG 图像可悲搜索、索引、脚本化或压缩
    3.SVG 是可伸缩的
    4.SVG 图像可在任何的分辨率下被高质量的打印
    5.SVG 可在图像质量不下降的情况下被放大

    实例:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    </head>
    <body>

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
    <polygon points="100,10 40,180 190,60 10,60 160,180"
    style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"/>
    </svg>

    </body>
    </html>

    SVG和Canvas两者间的区别
    1.SVG是一种使用XML描述2D图形的语言
    2.Canvas通过JavaScript来绘制2D图形
    3.SVG基于XML,这意味着SVG DOM中的每个元素都是可用的,你可以为某个元素添加JavaScript事件处理器
    4.在SVG中,每个背绘制的图形均被视为对象,如果SVG对象的属性发生变化,那么浏览器能够自动重现图形
    5.Canvas是逐像素进行渲染的,在Cnvas中,一旦图形背绘制完成,他就不会继续得到浏览器的关注,如果其位置发生变化,那么整个场景也需要重新绘制,包括任何或者已被图形覆盖的对象

    相关文章

      网友评论

          本文标题:HTML5 内联 SVG

          本文链接:https://www.haomeiwen.com/subject/vgbzfftx.html