svg简介

矢量图和位图

矢量图:基于数学的描述

位图:基于像素点的描述

svg的使用

1、浏览器直接打开svg文件

2、通过IMG标签使用

3、通过SVG标签使用

4、作为CSS背景使用

基本图形和基本属性

基本图形:rect circle ellipse line polyline polygon

基本属性:

fill:填充色

stroke:描边色

stroke-width:描边宽度

transform:图形变换

rect

x:起点x

y:起点y

width:宽度

height:高度

rx:圆角x

ry:圆角y

circle

cx:圆心x

cy:圆心y

r:半径

ellipse

cx:圆心x

cy:圆心y

rx:半径x

ry:半径y

line

x1:起点x

y1:起点y

x2:终点x

y2:终点y

polyline

points:属性(xi, yi)+

xi:第i点x

yi:第i点y

 1 <svg xmlns="http://www.w3.org/2000/svg">
 2     <rect
 3         x="10"
 4         y="10"
 5         rx="5"
 6         ry="5"
 7         width="200"
 8         height="200"
 9         stroke="red"
10         fill="none"/>
11
12     <circle
13         cx="320"
14         cy="110"
15         r="100"
16         stroke="red"
17         fill="none"/>
18
19     <ellipse
20         cx="530"
21         cy="110"
22         rx="100"
23         ry="80"
24         stroke="red"
25         fill="none"/>
26
27     <line
28         x1="10"
29         y1="220"
30         x2="200"
31         y2="420"
32         stroke="red"/>
33
34     <polyline
35         points="220 220 420 320 220 420"
36         fill="none"
37         stroke="red"/>
38
39     <polygon
40         points="440 220 640 320 440 420"
41         fill="none"
42         stroke="red"/>
43 </svg>

svg api接口

创建图形:document.createElementNS(ns, tagName)

添加图形:appendChild(element)

获取属性:getAttribute(attr)

设置属性:setAttribute(attr, val)

时间: 2024-11-05 23:24:43

svg简介的相关文章

前端技术-svg简介与snap.svg.js开源项目的使用

前言-为什么学习snap.svg.js 前阵子webAPP的技术群里有人感觉到svg+animate的形式感觉很炫,矢量图任意放大且不需要下载图片,并且在手机端效果流畅. (矢量图与位图最大的区别是,它不受分辨率的影响.可以任意放大或缩小图形而不会影响出图的清晰度, 可以按最高分辨率显示到输出设备上,位图即相机拍出来的,由像素块组成的图片. svg代码可使用Adobe公司的AI软件导出,该Snap.svg也是Adobe的开源项目) 虽然svg.animate并不新鲜,但由于svg的代码是由PC计

SVG 简介

SVG( Scalable Vector Graphics): 是可缩放的矢量图形的简称,它是一种使用XML来描述二维图形及其应用的语言. 首先了解一下XML, 它和html 类似,如 <greeting>Hello</greeting>, 但是语法结构非常严格,  一个xml文档只有一个根元素:标签元素必须一一对应匹配:元素必须有结束标记,尤其是单标签:元素属性必须赋值,且值必须用引号括起来:最后这两点要注意一下,因为在html中,单标签后面的结束标记可以省略,如<br&g

SVG系列教程:SVG简介与嵌入HTML页面的方式

地址:http://www.w3cplus.com/html5/svg-introduction-and-embedded-html-page.html 随着技术向前的推进,SVG相关的讨论也越渐频繁.为了紧跟时代的步伐,我也开始步入SVG相关技术的探索与学习之中.从这篇文章开始会在W3cplus站点上陆续向大家推出有关于SVG相关的教程.译文或案例等.感兴趣的同学可以跟随着教程一起了解与学习SVG相关的知识与技巧. 什么是SVG SVG是"Scalable Vector Graphics&qu

电网SVG简介

目 录1.        范围        12.        规范性引用文件        13.        缩略语        14.        本标准涉及的图形交换特征        15.        交互格式及流程        26.        METADATA模型        27.        SVG文件描述        47.1        基本的文件结构        47.2        文件头        47.3        表现形式 

svg简介与使用

什么是svg SVG是"Scalable Vector Graphics"的简称.中文可以理解成"可缩放矢量图形". 可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式.它由万维网联盟制定,是一个开放标准. 关键词:SVG是可缩放矢量图形,1999年由万维网联盟发布.于2013年成为W3C推荐标准. SVG是指可伸缩矢量图形 SVG用来定义用于网络的基于矢量的图形 SVG使用XML格式定义图形 SVG图像在放大或缩小(改

如何使用SVG生成超酷的页面预加载素描动画效果

在线演示 本地下载 1 SVG简介 可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式.它由万维网联盟制定,是一个开放标准. 2 SVG的特点 与其他图像格式相比(比如 JPEG 和 GIF),使用 SVG 的优势在于: SVG 图像可通过文本编辑器来创建和修改 SVG 图像可被搜索.索引.脚本化或压缩 SVG 是可伸缩的 SVG 图像可在任何的分辨率下被高质量地打印 SVG 可在图像质量不下降的情况下被放大 3 浏览器支持 Internet Exp

关于Android中使用SVG特性的探索与总结

前言 引入SVG还需要从图片的数字化说起.一般来说,将图片存储为数据有两种方案.其一.就是我们传统使用的位图(光栅图).即将图片看成在平面上密集排布的点的集合.每个点发出的光有独立的频率和强度,反映在视觉上,就是颜色和亮度.位图拥有一个庞大的家族,包括常见的JPEG/JPG, GIF, TIFF, PNG, BMP等.第二种方案就是矢量图(SVG就是其中的一种).它用抽象的视角看待图形,记录其中展示的模式而不是各个点的原始数据.它将图片看成各个"对象"的组合,用曲线记录对象的轮廓,用某

[翻译]svg学习系列 开篇

网上svg的资料太少 买个书也买不到 碰巧遇到一个外国友人的svg学习些列,翻译下 http://tutorials.jenkov.com/svg/index.html svg 简介 可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式.它由万维网联盟制定,是一个开放标准. 今天的现代多数浏览器都支持SVG  ie9+ 火狐 chrome 等 svg 最大的用途就是绘图 各种图标 等 ,在网页上直接绘图 因为svg本身的dom节点,所以可以和网页上其他

Android L New API之Verctor动画 1 —— SVG Path

导入 1.VectorDrawable是Android L中新增的一个API,让你可以创建基于XML的矢量图,并结合AnimatedVectorDrawable来实现动画效果. 2.Android L新增支持Vector标签,可以使用Path创建动画,同时支持SVG格式. SVG 简介 1.SVG 指可伸缩矢量图形 (Scalable Vector Graphics)2.SVG 用来定义用于网络的基于矢量的图形3.SVG 使用 XML 格式定义图形4.SVG 图像在放大或改变尺寸的情况下其图形质