HTML5系列-SVG了解

最新推荐文章于 2024-08-07 21:37:33 发布
最新推荐文章于 2024-08-07 21:37:33 发布
阅读量524 收藏 1
点赞数

我们对svg进行初步了解

1.介绍

SVG是一种矢量图格式。SVG是Scalable Vector Graphics三个单词的首字母缩写。Adobe Illustrator是专门编辑、制作矢量图的软件工具。SVG是Adobe Illustrator的主要制作目标。你可以在轻松的网页上使用漂亮的SVG图，但SVG有很多的用法你可能还不知道。

我们通过AI可以制作svg，制作的矢量图在AI提供了直接生成svg文件的选择项，还有编辑svg文件的选项功能。

3.兼容及相关

ie9及其以上和其他主流浏览器

他是来自xml的扩展

canvas只能通过js控制绘制，svg通过标签绘制

3.实用到html页面

--1.创建svg文件，后缀名是.svg，保存成svg.svg

<?xml version="1.0" standalone="no"?>  
  
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"   
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">  
  
<svg width="100%" height="100%" version="1.1"  
xmlns="http://www.w3.org/2000/svg">  
  
<circle cx="100" cy="50" r="40" stroke="black"  
stroke-width="2" fill="red"/>  
</svg>

其中

circle cx="100" cy="50" r="40" stroke="black"  
stroke-width="2" fill="red"/>

是绘制处理，我们看单词应该是一个红色圆形的绘制，半径40，描边宽度是2，和我们的canvas的dom api差不多名字

--2.embed标签引入外部svg文件

html结构如下：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<style type="text/css">
 *{ margin:0; padding:0;}  
  
  </style>
<title>demo</title>
</head>
<body> 
<embed src="svg.svg" width="300" height="100" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/" /> 
  
</body>
<script type="text/javascript"> 
window.onload=function(){
  
  
};
  
</script>
</html>

这是html5提供的新标签，作为外部内容和插件引入处理。

--3.object标签引入外部svg文件

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<style type="text/css">
 *{ margin:0; padding:0;}  
  
  </style>
<title>demo</title>
</head>
<body> 
<object data="svg.svg" width="300" height="100"   
type="image/svg+xml"  
codebase="http://www.adobe.com/svg/viewer/install/" />  
  
</body>
<script type="text/javascript"> 
window.onload=function(){
  
  
};
  
</script>
</html>

object是以前就有的标签，还可以引入视频，音频等等文件。

--4.iframe标签引入外部svg文件

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<style type="text/css">
 *{ margin:0; padding:0;}  
  
  </style>
<title>demo</title>
</head>
<body> 
<iframe src="svg.svg" width="300" height="100">  
</iframe>  
  
</body>
<script type="text/javascript"> 
window.onload=function(){
  
  
};
  
</script>
</html>

浮动框架标签以前我们都是引入外部的html页面，同样可以引入svg。

--5.html页面内部写svg标签

<!<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<style type="text/css">  *{ margin:0; padding:0;}        </style>
<title>demo</title>
</head>
<body>
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
</svg>
</body>
<script type="text/javascript">  window.onload=function(){       };    </script>
</html>

我们最喜欢的方式，写法确实不是很好，这样就会和我们的html标签交错。

--6.svg外部文件做图片引入

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<style type="text/css">
 *{ margin:0; padding:0;}  
  
  </style>
<title>demo</title>
</head>
<body> 
 <img src="svg.svg"  width="300" />
</body>
<script type="text/javascript"> 
window.onload=function(){
  
  
};
  
</script>
</html>

--7.svg外部文件做css背景引入

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<style type="text/css">
 *{ margin:0; padding:0;}  
  .svg{background: url('svg.svg') no-repeat center;height: 300px;width: 300px;
}
  </style>
<title>demo</title>
</head>
<body> 
<div class="svg"></div>
</body>
<script type="text/javascript"> 
window.onload=function(){
  
  
};
  
</script>
</html>

总结：

svg页面可以做背景图

可以充当图片资源

可以作为外部对象被引用标签引入

可以在html页面内部以标签形式创建。

学习SVG的各种绘制标签

1.一份demo演示程序

我们都采用html页面内标签形式创建，比较符合我们写div时候的习惯，还是运行上面的程序，在高级浏览器下预览：

<!DO<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<style type="text/css">  *{ margin:0; padding:0;}        </style>
<title>demo</title>
</head>
<body>
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
</svg>
</body>
<script type="text/javascript">  window.onload=function(){       };    </script>
</html>

显示效果：

这种写法和我们书写html几乎没有任何的区别，相对canvas要用js的绘制我们理解更容易。

svg是一对闭合标签，就是创建了绘制的舞台画布，

circle是绘制处理标签，绘制圆形，里面的属性就是绘制的具体操作。

既然有绘制圆形，通过对canvas的了解就可以想到对应存在：矩形，线，曲线，贝塞尔曲线等的绘制标签。

2.利用js进行动态处理

我们利用js对dom的操作，同样给circle加入id，找到和进行处理：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<style type="text/css">
 *{ margin:0; padding:0;}  
  
  </style>
<title>demo</title>
</head>
<body>
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/ id="aa">
</svg>
</body>
<script type="text/javascript"> 
window.onload=function(){
 
 var aa=document.getElementById("aa");  
 aa.onclick=function(){
  aa.setAttribute("stroke-width","5");
 };
  
};
</script>
</html>

利用dom找到aa，然后点击事件的处理修改绘制属性，我们发现变成了5，证明js+dom操作同样适合对svg的处理。

3.绘制矩形

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<style type="text/css">
 *{ margin:0; padding:0;}  
  
  </style>
<title>demo</title>
</head>
<body>
<svg width="800" height="800" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/ id="aa"></circle>
<rect x="220" y="50" width="50" height="50"
style="fill:blue;stroke:pink;stroke-width:5; fill-opacity:0.1;stroke-opacity:0.9"/></rect>
</svg>
</body>
<script type="text/javascript"> 
window.onload=function(){
 
 var aa=document.getElementById("aa");  
 aa.onclick=function(){
  aa.setAttribute("stroke-width","5");
 };
  
};
</script>
</html>

绘制矩形就是rect标签，预览看演示就知道 x y width height style中的stroke等的用途了。

我认为几个注意地方：

1.标签闭合，我们demo是没闭合的，这样在绘制多个会出现问题

2.svg标签的宽高属性表示画布大小，标签闭合

4.绘制圆形

已经在上面涉及circle标签定义。

4.绘制椭圆

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<style type="text/css">
 *{ margin:0; padding:0;}  
  
  </style>
<title>demo</title>
</head>
<body>
<svg width="800" height="800" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/ id="aa"></circle>
<rect x="220" y="50" width="50" height="50"
style="fill:blue;stroke:pink;stroke-width:5; fill-opacity:0.1;stroke-opacity:0.9"/></rect>
<ellipse cx="300" cy="200" rx="200" ry="80"
style="fill:#ddd; stroke:#aaa;stroke-width:2"/></ellipse>
</svg>
</body>
<script type="text/javascript"> 
window.onload=function(){
 
 var aa=document.getElementById("aa");  
 aa.onclick=function(){
  aa.setAttribute("stroke-width","5");
 };
  
};
</script>
</html>

 使用ellipse标签，cx cy标签圆心，rx ry表示在水平和垂直的半径

5.绘制线条

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<style type="text/css">
 *{ margin:0; padding:0;}  
  
  </style>
<title>demo</title>
</head>
<body>
<svg width="800" height="800" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/ id="aa"></circle>
<rect x="220" y="50" width="50" height="50"
style="fill:blue;stroke:pink;stroke-width:5; fill-opacity:0.1;stroke-opacity:0.9"/></rect>
<ellipse cx="300" cy="200" rx="200" ry="80"
style="fill:#ddd; stroke:#aaa;stroke-width:2"/></ellipse>
<line x1="0" y1="0" x2="300" y2="300"
style="stroke:rgb(99,99,99);stroke-width:2"/></line>
</svg>
</body>
<script type="text/javascript"> 
window.onload=function(){
 
 var aa=document.getElementById("aa");  
 aa.onclick=function(){
  aa.setAttribute("stroke-width","5");
 };
  
};
</script>
</html>

 使用line标签，其实坐标配对实现

6.绘制多边形

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<style type="text/css">
 *{ margin:0; padding:0;}  
  
  </style>
<title>demo</title>
</head>
<body>
<svg width="800" height="800" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/ id="aa"></circle>
<rect x="220" y="50" width="50" height="50"
style="fill:blue;stroke:pink;stroke-width:5; fill-opacity:0.1;stroke-opacity:0.9"/></rect>
<ellipse cx="300" cy="200" rx="200" ry="80"
style="fill:#ddd; stroke:#aaa;stroke-width:2"/></ellipse>
<line x1="0" y1="0" x2="300" y2="300"
style="stroke:rgb(99,99,99);stroke-width:2"/></line>
<polygon points="220,100 300,210 170,250"
style="fill:#cccccc; stroke:#000000;stroke-width:1"/></polygon>
</svg>
</body>
<script type="text/javascript"> 
window.onload=function(){
 
 var aa=document.getElementById("aa");  
 aa.onclick=function(){
  aa.setAttribute("stroke-width","5");
 };
  
};
</script>
</html>

 使用polygon标签，在 points里每对坐标之间用空格分割，定了3组就是三角形

 7.绘制多边形

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<style type="text/css">
 *{ margin:0; padding:0;}  
  
  </style>
<title>demo</title>
</head>
<body>
<svg width="800" height="800" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/ id="aa"></circle>
<rect x="220" y="50" width="50" height="50"
style="fill:blue;stroke:pink;stroke-width:5; fill-opacity:0.1;stroke-opacity:0.9"/></rect>
<ellipse cx="300" cy="200" rx="200" ry="80"
style="fill:#ddd; stroke:#aaa;stroke-width:2"/></ellipse>
<line x1="0" y1="0" x2="300" y2="300"
style="stroke:rgb(99,99,99);stroke-width:2"/></line>
<polygon points="220,100 300,210 170,250"
style="fill:#cccccc; stroke:#000000;stroke-width:1"/></polygon>
<polyline points="0,0 0,20 20,20 20,40 40,40 40,60"
style="fill:white;stroke:red;stroke-width:2"/></polyline>
</svg>
</body>
<script type="text/javascript"> 
window.onload=function(){
 
 var aa=document.getElementById("aa");  
 aa.onclick=function(){
  aa.setAttribute("stroke-width","5");
 };
  
};
</script>
</html>

使用polyline标签，用法和多边形一样

 8.绘制路径

这里是最灵活的处理，我们可以实现各种自定义的绘制，基本的参数：

M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Belzier curve
T = smooth quadratic Belzier curveto
A = elliptical Arc
Z = closepath

有一半可以和我们canvas的路径绘制对应上。

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<style type="text/css">
 *{ margin:0; padding:0;}  
  
  </style>
<title>demo</title>
</head>
<body>
<svg width="800" height="800" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<path d="M250 150 L150 350 L350 350 Z" />
</svg>
</body>
<script type="text/javascript"> 
window.onload=function(){
 
 var aa=document.getElementById("aa");  
 aa.onclick=function(){
  aa.setAttribute("stroke-width","5");
 };
  
};
</script>
</html>

操作是moveto其实坐标，连接到 lineto 连接到lineto 最后closepath，实现闭合，形成了三角形绘制。

我们利用贝塞尔绘制一次，用的是c，贝塞尔包含2组控制点，起始点由前面接口创建，最后写一个结束点，所以c会写3组坐标

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<style type="text/css">
 *{ margin:0; padding:0;}  
  
  </style>
<title>demo</title>
</head>
<body>
<svg width="800" height="800" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<path d="M250 150 C150 350 350 350 500 500" style="fill:#fff;stroke:#000;stroke-width:2"/>
</svg>
</body>
<script type="text/javascript"> 
window.onload=function(){
 
 var aa=document.getElementById("aa");  
 aa.onclick=function(){
  aa.setAttribute("stroke-width","5");
 };
  
};
</script>
</html>

我们把填充设置为白色，看见一条如同ps钢笔工具的路径出现了。

svg的基本绘制操作就这些，一些实例定义，可以看这里：

http://www.w3school.com.cn/svg/svg_examples.asp

欣欣然然
关注
HTML ＜svg＞ 标签
玄链教育
08-21 1089
svg>标记定义 SVG 图形的容器。SVG 有几种绘制路径、框、圆、文本和图形图像的方法。如需了解有关 SVG 的更多信息，请阅读我们的 SVG 教程。
【HTML5】——SVG基础
袅袅青烟散的博客
10-11 621
目录1.什么是SVG 2.绘制图形——矩形元素 3.绘制图形——圆形元素 4.绘制图形——椭圆元素 5.绘制图形——线条元素 6.绘制图形——折线元素 7.绘制图形——多边形元素 8.特效元素——渐变元素 9.特效元素——滤镜元素 10.绘制图片 11.画布方法 12.two.js1.什么是SVGSVG（Scalable Vector Graphics）是一种使用XML技术描述
了解SVG
tempsitegoogle
06-14 171
教程细节 ·语言: JavaScript,HTML, SVG ·难度:中等 ·预计阅读时间:30 分钟 SVG-可缩放矢量图形，是一个XML风格标记驱动的矢量图形的浏览器渲染引擎。除了IE 9.0和Android V3之前版本外的所有浏览器都支持SVG。Canvas也有同样的支持情况，所以问题往往表现为：我们应该使用哪种方案？ 今天，我们将全面介绍SVG，并且解释为什么“我应该使...
HTML5 SVG，一篇文章就够了（超全超详细，附代码演示）
最新发布
懒羊羊大王的博客
08-07 1849
SVG，全称为Scalable Vector Graphics（可缩放矢量图形），是一种基于XML的矢量图形格式。它被设计用来不受分辨率限制地描述二维图形，能够在任何尺寸下都保持清晰，是现代网页设计和图形应用中不可或缺的一部分。 SVG 与 Canvas 的区别：SVG 基于 XML 而 Cnavas 基于 JavaScript……
HTML中的SVG
dianpi2993的博客
04-26 112
1、SVG的使用方式 1、浏览器直接打开 <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"> <!--Face--> <circle cx="100" cy="100" r="90" fill="#39F" /> <!...
HTML5(七)——SVG基础入门
2401_84092809的博客
05-05 1022
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
animated-svg-hero-slider
05-15
要实现"animated-svg-hero-slider"，首先需要了解SVG的基本结构和语法。SVG图形由一系列的形状和路径组成，如圆形、矩形、线条等，通过CSS控制其颜色、大小、位置等属性。然后，我们可以通过CSS的`@keyframes`规则来...
JS-animated-svg
03-14
SVG文件通常包含一系列的XML标签，如`<svg>`, `<rect>`, `<circle>`, `<path>`等，用于绘制各种形状。在JavaScript中，我们可以通过DOM（Document Object Model）接口来操作这些元素。例如，我们可以使用`document....
Hangman-Dom-svg-event-
02-17
【Hangman-Dom-svg-event-】项目是一个基于JavaScript实现的猜词游戏，它利用DOM（文档对象模型）操作、SVG（可缩放矢量图形）技术和事件处理来创建互动的游戏体验。下面将详细讲解这个项目涉及的主要知识点。 一、...
mastering-svg-code:我的《精通SVG》一书的代码和杂项
05-06
HTML5中对SVG的支持使得在网页中嵌入SVG图形变得简单，可以直接将SVG代码内联写入HTML文档，或者作为独立的SVG文件通过`<img>`标签引用，也可以使用`<object>`或`<embed>`标签。同时，CSS可以用来进一步样式化SVG...
gulp-sketch-svg-symbols:从 Sketch 画板准备 svg 图标以供 Web 使用
07-12
5. **输出文件**：将处理后的 SVG 符号集合保存为单独的文件，通常是一个 SVG 或 HTML 文件，可以被网页直接引用。 标签 "JavaScript" 指出这个工具是使用 JavaScript 编写的，这表明它是跨平台的，可以在任何支持 ...
html svg
金溪的博客
10-21 748
svg 是Scalable Vector Graphics意为可缩放矢量图形，SVG使用XML格式定义二维图形和绘图程序的语言。 实例 <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1....
HTML SVG
weixin_71439860的博客
07-16 870
什么是SVG SVG优势 SVG动画使用方法 SVG动画属性 SVG与Canvas两者之间的区别 Canvas与SVG的比较
突袭HTML5之SVG 2D入门1 - SVG综述
weixin_34054931的博客
03-15 109
位图与矢量图 　　以前，浏览器中显示的图形，例如jpeg、gif等，都是位图，这些图像格式是基于光栅的。在光栅图像中，图像文件定义了图像中每个像素的颜色值。浏览器需要读取这些值并做出相应行动。这种图像的再现能力比较强，但是在某些情形下会显得不足。例如，当浏览器以不同大小显示一副图像时，通常会产生锯齿边缘，这时，浏览器不得不为那些在原始图像中不存在的像素插入或猜测数值；这样会导致图像失真。此外，针...
HTML基础 - SVG标签
seevc的专栏
09-04 3030
svg是基于XML语法的图像格式，全称：Scalable Vector Graphics，即可缩放矢量图。svg图片可以加载。svg可以绘制基本图形，如：直线、圆形、矩形、多边形、路径等，下面就详细介绍下。
HTML5 十大新特性(五)——SVG绘图
weixin_30604651的博客
01-01 138
　　相对于canvas绘图，SVG是一种绘制矢量图的技术。全称叫做Scalable Vector Graphics，可缩放的矢量图，在2000年就已经存在，H5把它纳入了标准标签库，并进行了一些瘦身。需要注意的是，SVG图形的属性不属于HTML DOM标准，需要用核心DOM的方法来操作；SVG的样式可以用css，但是只能用其专有的属性；如果要使用js动态生成SVG其中的元素，创建方法得用docum...
HTML5如何使用SVG
热门推荐
聚风阁
01-05 4万+
代码优化永远是程序员亘古不变的需求，而合理的利用SVG图片来代替部分PNG/JPG等格式的图片则是前端优化重要的一环，既然是优化，那我们先来看看SVG图片都有哪些优势： SVG 可被非常多的工具读取和修改（比如记事本） SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。 SVG 是可伸缩的 SVG 图像可在任何的分辨率下被高质量地打印 SVG 可在图像质量不下降的情...
HTML5游戏编程实战指南：Canvas、SVG与WebGL
《Learning HTML5 Game Programming：A Hands-on Guide to Building Online Games Using Canvas, SVG, and WebGL》是Addison-Wesley Learning Series的一部分，该系列书籍旨在提供实践导向的学习体验，帮助读者迅速...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值