HTML5学习(五)----SVG
参考教程地址:http://www.w3school.com.cn/html5/html_5_svg.asp
HTML5 支持内联 SVG。
什么是SVG?
- SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
- SVG 用于定义用于网络的基于矢量的图形
- SVG 使用 XML 格式定义图形
- SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
- SVG 是万维网联盟的标准
SVG 的优势
与其他图像格式相比(比如 JPEG 和 GIF),使用 SVG 的优势在于:
- SVG 图像可通过文本编辑器来创建和修改
- SVG 图像可被搜索、索引、脚本化或压缩
- SVG 是可伸缩的
- SVG 图像可在任何的分辨率下被高质量地打印
- SVG 可在图像质量不下降的情况下被放大
<!DOCTYPE html>
<html>
<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:red;stroke:blue;stroke-width:3;fill-rule:evenodd;" />
</svg> </body>
</html>
HTML5学习(五)----SVG的更多相关文章
- SVG 学习<五> SVG动画
目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...
- HTML5学习(六)---------SVG 与Canvas
参考教程:http://www.w3school.com.cn/html5/html_5_canvas_vs_svg.asp Canvas 和 SVG 都允许您在浏览器中创建图形,但是它们在根本上是不 ...
- [html5] 学习笔记-SVG
1.SVG介绍:什么是SVG? 1)SVG指可伸缩矢量图形(Scalable Vector Graphics) 2)SVG用来定义用于网络的基于矢量的图形 3)SVG使用XML格式定义图形 4)SVG ...
- SVG 学习<八> SVG的路径——path(2)贝塞尔曲线命令、光滑贝塞尔曲线命令
目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...
- SVG 学习<七> SVG的路径——path(1)直线命令、弧线命令
目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...
- SVG 学习<六> SVG的transform
目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...
- HTML5 学习总结(一)——HTML5概要与新增标签
一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电.触摸 ...
- HTML5学习总结——canvas绘制象棋(canvas绘图)
一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...
- HTML5 学习笔记(一)——HTML5概要与新增标签
目录 一.HTML5概要 1.1.为什么需要HTML5 1.2.什么是HTML5 1.3.HTML5现状及浏览器支持 1.4.HTML5特性 1.5.HTML5优点与缺点 1.5.1.优点 1.5.2 ...
随机推荐
- html5 全屏滚动活动页学习
先看几个具体的实例: 1.腾讯娱乐:http://ent.qq.com/zt2014/qqent/h5.htm?from=groupmessage&isappinstalled=0 2.苏宁互 ...
- eclipse 分屏
刚刚一直找不到eclipse分屏功能,查了下发现是可以的. 具体见:http://www.coderanch.com/t/101996/vc/Split-screen-editor-Eclipse E ...
- php header头信息 举例
发布:sunday01 来源:Net [大 中 小] 转自:http://www.jbxue.com/article/6915.html 用于演示PHP header()函数用法的代码,介 ...
- js判断屏幕分辨率的代码
通过下面的代码判断分辨率 <script language="JavaScript"> <!-- Begin function redirectPage() { ...
- 《HTML5 CANVAS基础教程》读书笔记
一.HTML5简介 1.HTML5新特性 1)结构元素:section,header,hgroup,footer,nav,article,aside, 2)内容元素:figure,figcaption ...
- oracle 将科学计数法数据转换为非科学计数法数据
oracle 自定义函数: CREATE OR REPLACE FUNCTION ConvertNumeric(rawData VARCHAR2) --用于返回转换科学计算法dhx RETURN VA ...
- Orcale Function Sequence
Orcale Function Sequence. 1 Create Or Replace Function F_Get_Sequence(As_Companyno In Varchar2, As_T ...
- putty连接linux as5 输入密码后连接中断
putty连接linux as5 输入密码后连接中断 1.修改putty首页的设置,选择“close session on exit” 为 “never”,之后发现输入密码后,“session clo ...
- BZOJ 1589: [Usaco2008 Dec]Trick or Treat on the Farm 采集糖果
Description 每年万圣节,威斯康星的奶牛们都要打扮一番,出门在农场的N(1≤N≤100000)个牛棚里转悠,来采集糖果.她们每走到一个未曾经过的牛棚,就会采集这个棚里的1颗糖果. 农场不大, ...
- 【leetcode】Longest Common Prefix (easy)
Write a function to find the longest common prefix string amongst an array of strings. 思路:找最长公共前缀 常规 ...