SVG图片在HTML页面中的四种加载方法

已于 2023-11-20 09:34:17 修改
阅读量3.6k 收藏 47
点赞数 43
分类专栏： # HTML理论与实践 文章标签： html 前端
于 2023-11-20 09:25:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cuclife/article/details/134499977
版权

HTML专栏是汇集了一些HTML常常被遗忘的知识，这里算是温故而知新，往往这些零碎的知识点，在你开发中能起到炸惊效果。我们每个人都没有过目不忘，过久不忘的本事，就让这一点点知识慢慢渗透你的脑海。 本专栏的风格是力求简洁明了。

 SVG因为体积小，矢量图的缘故，经常会在html页面中引用此种格式的图形。 具体的有以下几种形式：

方法1，直接在html中添加SVG代码

<!DOCTYPE html> 
<html> 
<body> 
 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
   <circle cx="50" cy="50" r="40" stroke="yellow" stroke-width="2" fill="red" /> 
</svg>  
  
</body> 
</html>

方法2，使用 <embed> 标签

<embed>:优势：所有主要浏览器都支持，并允许使用脚本缺点：不推荐在HTML4和XHTML中使用（但在HTML5允许）

<embed src="circle1.svg" type="image/svg+xml" />

方法3，使用 <object> 标签

<object>:优势：所有主要浏览器都支持，并支持HTML4，XHTML和HTML5标准缺点：不允许使用脚本。

<object data="circle1.svg" type="image/svg+xml"></object>

方法4，使用 <iframe> 标签

<iframe>:优势：所有主要浏览器都支持，并允许使用脚本缺点：不推荐在HTML4和XHTML中使用（但在HTML5允许）

<iframe src="circle1.svg"></iframe>

附识：

（1）SVG在线编辑器

 网络上有很多网站提供一种支持在线编辑SVG的JS方法。我们借用成功的经验即可。

www.zuohaotu.com/svg/

c.runoob.com/more/svgeditor/

（2）SVG可用的滤镜

feBlend - 与图像相结合的滤镜 
feColorMatrix - 用于彩色滤光片转换 
feComponentTransfer 
feComposite 
feConvolveMatrix 
feDiffuseLighting 
feDisplacementMap 
feFlood 
feGaussianBlur 
feImage 
feMerge 
feMorphology 
feOffset - 过滤阴影 
feSpecularLighting 
feTile 
feTurbulence 
feDistantLight - 用于照明过滤 
fePointLight - 用于照明过滤 
feSpotLight - 用于照明过滤

（3）示例代码

 

  1. <?xml version="1.0" standalone="no"?> 
  2. <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"  
  3. "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
  5. <svg width="100%" height="100%" version="1.1" 
  6. xmlns="http://www.w3.org/2000/svg"> 
  8. <ellipse cx="300" cy="150" rx="200" ry="80" 
  9. style="fill:rgb(100,100,150); 
  10. stroke:rgb(0,150,0);stroke-width:3"/> 
  12. </svg> 
 

（4）代码说明
 

第一行包含了 XML 声明。请注意 standalone 属性！该属性规定此 SVG 文件是否是"独立的"，或含有对外部文件的引用。
 

standalone="no" 意味着 SVG 文档会引用一个外部文件 - 在这里，是 DTD 文件。
 

第二和第三行引用了这个外部的 SVG DTD。该 DTD 位于 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"。该 DTD 位于 W3C，含有所有允许的 SVG 元素。
 

SVG 代码以 <svg> 元素开始，包括开启标签 <svg> 和关闭标签 </svg> 。这是根元素。width 和 height 属性可设置此 SVG 文档的宽度和高度。version 属性可定义所使用的 SVG 版本，xmlns 属性可定义 SVG 命名空间。
 

 

HTML是前端页面展示的骨架，应用无处不在，希望某个知识点就能帮助你，欢迎学习GIS的朋友一起交流。 
 [《 Openlayers 综合示例200+ 》]
 [《 leaflet示例教程100+ 》]
 [《 Cesium示例教程100+》]
 [《MapboxGL示例教程100+》]
  

                

        

        

        

    




    

      

        

            

              
                
                  还是大剑师兰特
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    43
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    47
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
                
  • 
                  
                    打赏
                    
                  
                  
    打赏
    
                
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                  35
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
使用HTML5进行SVG矢量图形绘制的入门教程

				
			

			

				

					01-19
				

			

		

		

			
				
VG 表示可伸缩矢量图形，这是一门用于描述 2D 图形的语言，图形应用使用 XML 编写，然后 XML 由 SVG 阅读器程序呈现。
SVG 主要用于矢量类型的图表，比如饼图，X，Y 坐标系统中的二维图等等。
SVG 在 2003 年 1 月 14 日成为 W3C 推荐标准，你可以在 SVG 规范 页面中查看最新版本的 SVG 规范。
查看 SVG 文件大多数 Web 浏览器都可以显示 SVG，就像它们可以显示 PNG，GIF 以及 JPG 图形。IE 用户可能需要安装 Adobe SVG 阅读器 以便能够在浏览器中查看 SVG。
在 HTML5 中嵌入 SVGHTML5 允许我们直接使用 _

			
		

	



                

              
                



	

		

			

				
					
 HTML中嵌入SVG图片的N种方式

				
			

			

				

					weixin_33810006的博客
				

				

					08-31
					
					7667
					
				

			

		

		

			
				
最近用到了个SVG图片，里面还是带<image>标签的，想要把它嵌入到HTML中还是有些工作要做的。
经历
最初的图片是这样写的：
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "htt...

			
		

	



                


  
              

                


	

		

			

				
					
分享html网页引入svg图片的4种方法

				
			

			

				

					xiaoweids的博客
				

				

					05-18
					
					5896
					
				

			

		

		

			
				
本文主要介绍了html网页引入svg图片的4种方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着微点阅读小编来一起学习学习吧web应用开发使用svg图片，总结了下，可以有如下4种方式：1. 直接插入页面。2. img标签引入。3. css引入。4. object标签引入。

			
		

	





	

		

			

				
					
大数据毕业设计之前端05：Vue中如何加载本地svg图标

				
			

			

				

					CatchLight的博客
				

				

					03-04
					
					1125
					
				

			

		

		

			
				
上篇文章主要讲了图标组件Icon的实现，主要包括了两种常用的图标。今天就讲一下如何在Icon中加载本地的svg图标。开篇还是将Icon实现结构图放出来，今天只看svg这条支线。在components/icon/svg目录下，实现了一个svg的component，定义html原生的svg标签。下的中的href属性，需要指定的是svg图标的名字，而绑定的iconName，可以看到是引用的是props.name，即是通过父组件传过来的name属性。

			
		

	



		

			
		



	

		

			

				
					
将SVG插入到HTML中的几种方式（二）

				
			

			

				

					77今天也学习了的博客
				

				

					04-22
					
					2144
					
				

			

		

		

			
				
将SVG插入到HTML中主要有以下几种方式：



<ember src="xxx.svg" type="image/svg+xml"  />
//优势：所有主要浏览器都支持，并允许使用脚本
//缺点：不推荐在HTML4和XHTML中使用（但在HTML5允许）




//将 SVG 作为object对象导入
//注意，MIME type必须是*image/svg+xml*。
//可以...

			
		

	





	

		

			

				
					
SVG 入门 及 嵌入HTML的7种方式

					
热门推荐

				
			

			

				

					司马懿的西山居
				

				

					11-25
					
					3万+
					
				

			

		

		

			
				
SVG简介SVG 意为可缩放矢量图形（Scalable Vector Graphics）。 
SVG 使用 XML 格式定义图像。SVG与其他图像格式相比，SVG的优势在于
SVG 可被非常多的工具读取和修改（比如记事本）
SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不下降的情况下被放

			
		

	





	

		

			

				
					
在html页面中加入矢量图,HTML页面插入SVG的多种方式

				
			

			

				

					weixin_30140707的博客
				

				

					05-31
					
					1299
					
				

			

		

		

			
				
SVG (Scalable Vector Graphics) 可缩放矢量图，是一种基于XML语法的图像格式。其他图像格式都是基于像素处理的，SVG则是属于对图像的形状描述，所以它本质上是文本文件，体积相对较小，且放大时也不会失真。插入svg标签直接使用  标签插入内容到网页中，成为DOM的一部分，然后可以使用CSS和JS进行控制。一个简单的圆：//可以用CSS控制SVG的样式，但属性与普通的网页元...

			
		

	





	

		

			

				
					
Android加载html中svg格式图片进行显示

				
			

			

				

					01-04
				

			

		

		

			
				
最近做的一个项目是把assets目录中的html显示出来,但是因为html里面有一些工程图片,虽然我用ViewPager和PhotoView,进行显示放大了,但是因为工程图片的线条较多还是比较模糊.所以后来就想用svg图片来进行显示,至于svg是什么,我这里就不做多的说明,可以去网上搜一搜看看.因为svg和png jpg是不同的,没办法用glide(我图片加载框架用的是glide)进行加载,所以我就只能另想办法了,最后找到一个开源库,解决了我的问题,下面我也是用开源库做的,但是有几个坑需要注意:
开源库地址:https://github.com/japgolly/svg-android 在An

			
		

	





	

		

			

				
					
网页中使用 SVG

				
			

			

				

					Code Writers
				

				

					12-20
					
					1600
					
				

			

		

		

			
				
技术一直在演变，在网页中使用 SVG 的方法也层出不穷。每个时期都有对应的最优解。所以我打算把我知道的 7种 SVG 的使用方法列举出来，有备无患~如果你还知道其他方法，可以在评论区补充~在写本文时，我推荐使用 内嵌到 HTML 的方式来做日常开发。其他方式按照你实际需求去使用即可。最后的 embed 和 object 这两种方式可以当做备用方案去使用。

			
		

	





	

		

			

				
					
HTML页面SVG的使用

				
			

			

				

					Kwoky的博客
				

				

					09-16
					
					1万+
					
				

			

		

		

			
				
SVG (Scalable Vector Graphics) 可缩放矢量图，是一种基于XML语法的图像格式。其他图像格式都是基于像素处理的，SVG则是属于对图像的形状描述，所以它本质上是文本文件，体积相对较小，且放大时也不会失真。



插入svg标签



直接使用 <svg> 标签插入内容到网页中，成为DOM的一部分，然后可以使用CSS和JS进行控制。

<svg width="400" heihgt="300" id="testSvg">

 <circle cx="..

			
		

	





	

		

			

				
					
html5矢量图形SVG

				
			

			

				

					m0_71814235的博客
				

				

					06-24
					
					841
					
				

			

		

		

			
				
html5矢量图形SVG

			
		

	





	

		

			

				
					
html中插入svg

				
			

			

				

					m0_61696809的博客
				

				

					02-20
					
					6790
					
				

			

		

		

			
				
html中插入svg的不同方法

			
		

	





	

		

			

				
					
纯svg加载loading动画.zip

				
			

			

				

					09-01
				

			

		

		

			
				
包含使用svg制作的加载loading动画。该加载loading动画特效共有11种效果，使用img标签直接调用svg文件来生成各种SVG动态图片。

			
		

	





	

		

			

				
					
html5 svg 中元素点击事件添加方法

				
			

			

				

					12-13
				

			

		

		

			
				
最近在用svg的点击事件做东西，之所以用svg而不用canvas就是因为svg内的元素可以添加点击事件，他们之间详细的区别如下： Canvas 与 SVG 的比较（详见） 下表列出了 canvas 与 SVG 之间的一些不同之处。...做出的网页在

			
		

	





	

		

			

				
					
13种svg html5 loading页面加载动画弹出

				
			

			

				

					03-11
				

			

		

		

			
				
13种svg html5 loading页面加载动画弹出 html5 loading页面加载动画

			
		

	





	

		

			

				
					
HTML5 SVG圆点跳动加载特效

				
			

			

				

					07-24
				

			

		

		

			
				
HTML5 SVG圆点跳动加载特效是一款基于HTML5 SVG绘制的水平线条排列的5个圆点依次顺序来回跳动网页加载动画特效。

			
		

	





	

		

			

				
					
Webpack实战加载SVG的方法

				
			

			

				

					11-27
				

			

		

		

			
				
 在网页中采用 SVG 代替位图有如下好处：  SVG 相对于位图更清晰，在任意缩放的情况下后不会破坏图形的清晰度，SVG 能方便地解决高分辨率屏幕下图像显示不清楚的问题。  在图形线条比较简单的情况下，SVG 文件的大小...

			
		

	





	

		

			

				
					
HTML：认识HTML及基本语法

					
最新发布

				
			

			

				

					2301_79263365的博客
				

				

					04-30
					
					677
					
				

			

		

		

			
				
标记语言中，就提供了许多的标签，不同标签有不同的功能，最终运行时，由浏览器对标签进行解析，最终呈现出不同标签的样子。

			
		

	





	

		

			

				
					
html如何实现按钮跳转，以及访问随机跳转

				
			

			

				

					weixin_42759398的博客
				

				

					04-29
					
					267
					
				

			

		

		

			
				
html如何实现按钮跳转，以及访问随机跳转。需求看似很冷门，实际上这个对应我上一篇文章。

			
		

	





	

		

			

				
					
html的svg标签怎么保存为图片

				
			

			

				

					05-24
				

			

		

		

			
				
可以使用 JavaScript 和 Canvas 将 SVG 转换为 PNG 或 JPEG 格式的图片，具体步骤如下：

1. 将 SVG 代码插入到 HTML 页面中，例如：

```html
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
  <rect x="10" y="10" width="80" height="80" fill="red"/>
</svg>
```

2. 在 JavaScript 中使用 `canvg` 库将 SVG 转换为 Canvas。可以使用以下代码：

```javascript
var svg = document.querySelector('svg');
var canvas = document.createElement('canvas');
canvas.width = svg.clientWidth;
canvas.height = svg.clientHeight;

canvg(canvas, svg.outerHTML, {
  ignoreMouse: true,
  ignoreAnimation: true,
  ignoreDimensions: true
});
```

3. 将 Canvas 转换为图片数据。可以使用以下代码：

```javascript
var imageData = canvas.toDataURL('image/png');
```

4. 可以通过将 `imageData` 赋值给一个 `<img>` 元素的 `src` 属性来显示转换后的图片，或者将 `imageData` 发送到服务器以保存为文件。

```javascript
var img = document.createElement('img');
img.src = imageData;
document.body.appendChild(img);
```

注意：如果 SVG 中包含外部文件（例如 `<image>`），则需要在转换之前将它们加载到页面中，否则转换后的图片将无法显示。

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		
评论 35

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
还是大剑师兰特

			
打赏一杯可口可乐

		

	

	

			

	

	

    ¥1
    ¥2
    ¥4
    ¥6
    ¥10
    ¥20
	

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

			
您的余额不足，请更换扫码支付或充值

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值