SVG，"Scalable Vector Graphics"可伸缩矢量图形，基于可扩展标记语言，用于描述二维矢量图形的一种图形格式。

SVG是纯粹的XML，可以使用以下方法插入到HTML中：

  • 使用<iframe>元素来嵌入SVG图像
  • 使用<img>元素来嵌入SVG图像
  • 将SVG图像作为背景图像嵌入
  • 直接使用<svg>元素
  • 使用<embed>元素来嵌入SVG图像
  • 使用<object>元素来嵌入SVG图像

假设有一个如下所示的SVG文件，名为test.svg

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">//这里xmlns是必须的

    <rect  width="100%" height="100%" style="fill:cornflowerblue" />

</svg>

SVG的xmlns声明空间必须指定，否则将不会解析成svg标签。

编写一个html文件，内容如下

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <img src="test.svg">

</body>

</html>

结果如下

也可以直接在html5文档中使用svg标签，如下所示

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <svg width="200" height="200">

        <circle cx="100" cy="100" r="50" style="fill:url(#orange_red)" />

        <defs>

            <linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">

                <stop offset="20%" style="stop-color:rgb(255,255,0);

                stop-opacity:1"/>

                <stop offset="80%" style="stop-color:rgb(255,0,0);

                stop-opacity:1"/>

            </linearGradient>

        </defs>

    </svg>

</body>

</html>

表现如下所示

Notes:SVG(1)的更多相关文章

  1. Notes:SVG(4)基于stroke-dasharray和stroke-dashoffset圆形进度条

    stroke-dasharray:定义描边的虚线长度,如果提供奇数个,则会自动复制该值成偶数 stroke-dashoffset:定义虚线描边的偏移量(在路径开始的前面,看不到) 实现如下所示 svg ...

  2. Notes:SVG(3)---滤镜和渐变

    SVG滤镜使用filter标签来定义,该标签必须嵌套在defs元素里面,并且必须指定一个ID,以供引用. 在 SVG 中,可用的滤镜有: feBlend feColorMatrix feCompone ...

  3. Notes:SVG(2)---各种常见图形

    1.矩形rect,指定rx,ry可以得到圆角矩形 <rect x="10" y="10" rx="10" ry="10&qu ...

  4. 【Openxml】将Openxml的椭圆弧线arcTo转为Svg的椭圆弧线

    本文将介绍如何将OpenXml的actTo转为Svg的弧线(a) OpenXml的artTo 首先下面是一段OpenXml的arcTo弧线 <arcTo wR="152403" ...

  5. 根据SVG Arc求出其开始角、摆动角和椭圆圆心

    SVG Arc 目前Svg的Arc的参数字符串如下: a rx ry x-axis-rotation large-arc-flag sweep-flag x y 除了a表示标识为Arc之外,其余参数说 ...

  6. HTML5的 2D SVG和SVG DOM的学习笔记（2）---SVG动画

    SVG支持动画.可以通过以下几种方法获得动画效果: 使用SVG动画元素.SVG可以描述随时间变化的图形对象,使用不同的动画元素可以定义运动路径,淡入淡出效果和对象的膨胀.收缩.旋转和变换颜色. 使用S ...

  7. HTML5的 2D SVG和SVG DOM的学习笔记（1）

    (项目中要使用SVG,只好补充知识了) HTML体系中,最常用的绘制矢量图的技术是SVG和HTML5新增加的canvas元素.这两种技术都支持绘制矢量图和光栅图. 一.SVG概述 可缩放矢量图形(Sc ...

  8. SVG 2D入门8 - 文档结构

    前面介绍了很多的基本元素,包括结构相关的组合和重用元素,这里先对SVG的文档结构中剩下的相关元素简单总结一下,然后继续向前领略SVG的其他特性. SVG文档的元素基本可以分为以下几类: 动画元素:an ...

  9. 使用SVG Path绘图

    最近一个项目,需要做个Web版本的设计器,用来进行工厂流水线布局的设计. 项目中采用了SVG.JS来做,但是以前流水线是采用单纯的画线的方式实现.客户提出希望用不同的底纹表示不同的流水线,经过一番调查 ...

随机推荐

  1. 整理ViewController的生命周期和加载过程

    按照执行顺序排列 - initWithCoder:通过nib文件初始化时触发 - awakeFromNib:nib文件被加载的时候,会发送一个awakeFromNib的消息到nib文件中的每个对象 p ...

  2. CentOS随笔 不断添加

    一.设置IP (1)临时IP  ifconfig eth0 192.168.120.16 (2)永久IP  vi /etc/sysconfig/network-scripts/ifcfg-eth0   ...

  3. 深入浅出HTTP协议(WEB开发和面试必备)

    1. 基础概念篇   a.简介 HTTP是Hyper Text Transfer Protocol(超文本传输协议)的缩写.它的发展是万维网协会(World Wide Web Consortium)和 ...

  4. EL表达式判断

    今天在做开发时遇到个小问题,就百度一番很快找到答案.这里记一下免得以后到处找... 在项目中显示项目名称时因为名字太长所以影响我的样式问题. 解决办法就是将固定长度之后的用"..." ...

  5. 在VisualStadio2015上使用EF6.0建立MySql数据库

    1.新建工程 2.建立类的文件夹DAL 3.建立相关类 [Student类] using System;using System.Collections.Generic;using System.Li ...

  6. FlexiGrid 使用 全选、自动绑定

    1.介绍 Flexigrid是一个类似于Ext Gird,但基于jQuery开发的Grid.它具有的功能包括:可以调整列宽,合并列标题,分页,排序,显示/隐藏表格等.Flexigrid显示的数据能够通 ...

  7. Eclipse自动生成作者、日期注释等功能设置

    我们在使用Eclipse 编写Java代码时,自动生成的注释信息都是按照预先设置好的格式生成的. 修改作者.日期注释格式:打开Windows->Preferences->Java-> ...

  8. crontab 案例

    #MIN HOUR DAY MONTH DAYOFWEEK COMMAND       #每天早上6点10分       10 6 * * * date       #每两个小时       0 */ ...

  9. 建模元件有哪些在MapleSim中

    信号库:包含通用信号模块.布尔.控制器.离散信号模块.信号源.线性信号模块.非线性信号模块.时间离散信号模块.查询表.信号转换器.数学运算.关系元件.特殊信号模块,应用案例. 电子库:包含电阻.运算放 ...

  10. 思科交换机配置DHCP的四个方面

    这里我们主要讲解了思科交换机配置DHCP的相关内容.我们对网络拓扑先进行一下了解,然后对于其在进行一下说明,之后对于配置的代码和命令再进行一下解析. 思科交换机配置DHCP一.网络拓扑 思科交换机配置 ...