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)

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

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏葡萄城控件技术团队

ASP.NET MVC 5 - 查询Details和Delete方法

在这部分教程中,接下来我们将讨论自动生成的Details和Delete方法。 查询Details和Delete方法 打开Movie控制器并查看Details方法...

1826
来自专栏张善友的专栏

移动站点开发

作者Dino Esposito 尝试从不主要侧重于技术的角度阐述移动站点开发,是每个web开发人员必读的系列文章,文章如下: 移动站点开发:第 1 部分 标记 ...

1928
来自专栏哲学驱动设计

ASP.NET MVC 框架结构图

    最近在学ASP.NET MVC,画了一些图,和大伙分享下: Routing 组件 ? 图1 独立的ASP.NET Routing组件 MVC-Contr...

1657
来自专栏我和未来有约会

sl 2.0 重要更新

更新Silverlight.js 更新项目模板 错误代码不再会为空 更新2-D API 支持HttpWebRequest/HttpWebResponse...

1727
来自专栏何俊林

今日力推: Android 高仿哔哩哔哩动画客户端 / Android MD版的花瓣网App

一、CardSwipeLayout 仿探探卡片滑动效果的布局 ? 链接: http://pan.baidu.com/s/1qYApDfQ 密码: fz3q 二、...

2259
来自专栏逍遥剑客的游戏开发

DirectX in C++/CLI

2355
来自专栏Ken的杂谈

文件下载-文件MIME类型对照表

642
来自专栏前端杂货铺

关于IE6的PNG图像透明使用AlphaImageLoader的缺点

PNG32的alpha透明效果在IE6下会出现bug,出现灰色背景。而目前的解决方案就是 IE提供的滤镜。需要注意的是滤镜并不是对原图片进行修改,而是对相应的h...

3498
来自专栏carven

xss总结记录

最近工作小组上,集中精力提高安全意识。而XSS作为全端安全中最常见的问题之一,我们也做了着重的学习。 XSS全称跨站脚本(Cross Site Scriptin...

610
来自专栏张善友的专栏

代码生成新选择-T4模板引擎

在博客堂看到ASP.NET MVC中的T4模板, 之前我也写过一篇文本模板转换工具箱T4。 T4(Text Template Transformation To...

1885

扫描关注云+社区