专栏首页HTML5学堂SVG - 创建SVG图片

SVG - 创建SVG图片

SVG - 创建SVG图片

HTML5学堂:之前在绘图中使用到了SVG以及Canvas,因此决定最近将绘图类的知识和大家分享一下。从研究角度来说,SVG比Canvas要难很多。没有合适的中文文档,自己只能去翻译英文文档(唉,英语不好啊)。今天先来说说SVG的基本知识以及创建SVG的基本方法。

SVG是什么

W3C推荐的网页图形格式,类似于Flash,SVG是一种描述二维矢量图形的标记语言,但它是一种开发的以XML为基础的语言,不是一种私有语言。

SVG的支持程度

IE8-以及Android 2.3默认浏览器是不支持SVG的

对SVG的基本理解

可以把SVG想象成类似于HTML的图形,可以与其他浏览器技术,如JavaScript、CSS、DOM无缝集合

为何使用SVG-SVG的优势

1、开发者可以使用任何简单的文本/网页编译器进行创建和修改。不需要Flash、PhotoShop、Paint等软件。

2、与像素无关,可以放大或者缩小,甚至打印成任意大小,图片质量不会改变。

创建SVG图片

方法1:使用外部引入SVG的方式

SVG是一个以.svg结尾的文本格式的文件,可以将这个文件以普通图片的方式嵌入到DOM当中。

<object data="XXX.svg" type="image/svg+xml" />

SVG文件的编辑

<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg"></svg>

SVG - 示例demo

<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg">
    <circle cx="400" cy="200" r="100" fill="yellow" stroke="black" stroke-width="1px" />
    <circle cx="350" cy="180" r="20" fill="black" />
    <circle cx="450" cy="180" r="20" fill="black" />
    <clipPath id="faceClip">
        <rect x="300" y="240" width="220" height="60" />
    </clipPath>
    <circle cx="400" cy="200" r="60" fill-opacity="0" stroke="black" stroke-width="5px" clip-path="url(#faceClip)" />
</svg>

方法2 在HTML中直接使用SVG

SVG - 示例demo

<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
<g>
<circle cx="400" cy="200" r="100" fill="yellow" stroke="black" stroke-width="1px" />
    <circle cx="350" cy="180" r="20" fill="black" />
    <circle cx="450" cy="180" r="20" fill="black" />
    <clipPath id="faceClip">
        <rect x="300" y="240" width="220" height="60" />
    </clipPath>
<circle cx="400" cy="200" r="60" fill-opacity="0" stroke="black" stroke-width="5px" clip-path="url(#faceClip)" />
</g>
</svg>

本文分享自微信公众号 - HTML5学堂(h5course-com),作者:HTML5学堂

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2015-08-19

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 控制台断点调试

    HTML5学堂:在项目开发过程中,难免会需要调试一些数据,而大量的console.log()需要频繁切换JS和页面,同时最后有可能还忘记删除打印信息。使用断点调...

    HTML5学堂
  • 笑谈“从入门到精通”

    从清明假期回来之后,朋友圈也好,自己之前学生的QQ群也罢,都被"从入门到精通(放弃或跑路)"的书籍刷爆。如下图 ? 有人说,程序员们又结结实实的自黑了一把。不了...

    HTML5学堂
  • IE hack技术

    HTML5学堂:我们平日说的IE hack到底是什么,随着浏览器的发展,IE的hack技术也在不断的发生着变化,一起看看最新的IE hack。 何为hack? ...

    HTML5学堂
  • PowerBI 从矩阵Sparkline揭示SVG图形通用技巧

    近日,PowerBI已经更新为度量值可以支持作为图像URL来进行解析,参考:PowerBI 2018 8月更新 一键导出PDF报告集合,这使得PowerBI在显...

    BI佐罗
  • Android 优化——应用瘦身

    七适散人
  • SVG基础

    SVG可缩放矢量图形Scalable Vector Graphics是基于可扩展标记语言XML,用于描述二维矢量图形的一种图形格式。SVG严格遵从XML语法,并...

    WindrunnerMax
  • 为什么要用SVG?- svg与iconfont、图片多维度对比

    腾讯ISUX
  • Using SVG

    SVG是一种向量图的图片格式,即可伸缩向量图(Scalable Vector Graphics),可以在Adobe Illustrator里面生成。在Web中使...

    icepy
  • 对SVG动画进行异步懒光栅化处理 [每日前端夜话(0x17)]

    在转换 SVG 图像时,浏览器会试着在每一帧上进行渲染,以便使图像尽可能的清晰。 不幸的是,SVG渲染可能会很慢,特别是对于较大的图像。

    疯狂的技术宅
  • Android微信上的SVG

    资源矢量化 “清晰”和“体积”的矛盾与麻烦 面对android的各种dpi某事,想要所有设备上的图片都能有最清晰的效果,就意味着每种dpi模式都必须提供一份对应...

    微信终端开发团队

扫码关注云+社区

领取腾讯云代金券