SVG如何嵌入html

一:SVG 文件可通过以下标签嵌入 HTML 文档:<embed>、<object> 或者 <iframe>。

推荐使用<embed>标签,<embed>
标签被所有主流的浏览器支持,并允许使用脚本。

二:来看一个例子

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>SVG嵌入html</title>
 </head>
 <body>
 <embed src="circle.svg" width="300" height="100" type="image/svg+xml"/>
 </body>
</html>
</pre><pre name="code" class="html"><span style="font-family:Verdana, Arial, 宋体;">我们继续使用第一讲</span><a target=_blank href="http://blog.csdn.net/u013628152/article/details/43307573" target="_blank" style="font-family: Verdana, Arial, 宋体;">初识SVG矢量图</a><span style="font-family:Verdana, Arial, 宋体;">中,创建的circle.svg.使用embed标签嵌套到html中。</span>
<span style="font-family:Verdana, Arial, 宋体;">
</span>
<span style="font-family:Verdana, Arial, 宋体;">打开html文件,仍然可以看到svg矢量图:</span>
<span style="font-family:Verdana, Arial, 宋体;">
</span>

三:SVG
预定义的形状元素

矩形
<rect>

圆形 <circle>

椭圆 <ellipse>

线 <line>

折线 <polyline>

多边形 <polygon>

路径 <path>

时间: 2024-10-10 05:12:14

SVG如何嵌入html的相关文章

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可缩放矢量图形

SVG是指可伸缩矢量图形 SVG用来定义用于网络的基于矢量的图形 SVG使用XML格式定义图形 SVG图像在放大或缩小(改变尺寸)的情况下,其图形质量不会受受损失 SVG是W3C的一个标准 与其他图像格式相比,使用SVG的优势在于: SVG可被非常多的工具读取和修改(比如记事本) SVG与JPEG和GIF图像比起来,尺寸更小,且可压缩性更强. SVG是可伸缩的 SVG图像可在任何的分辨率下被高质量地打印 SVG可在图像质量不下降的情况下被放大 SVG图像中的文本是可选的,同时也是可搜索的(很适合

svg学习笔记(一)

SVG——可扩展适量图形,基于XML PC端:IE9+   wap端:表现良好,适合使用 基础图形: line(线段)  <line x1="25" y1="150" x2="375" y2="50" stroke="#f00"></line> polyline(折线) <polyline points="250 75,350 100,100 0" stro

HTML5 中的可缩放矢量图形(SVG)

简介 可缩放矢量图形 (SVG) 是基于矢量的图形家族的一部分.它们与基于光栅的图形不同,后者在一个数据数组中存储每个像素的颜色定义.如今,网络上使用的最常见的光栅图形格式包括 JPEG.GIF 和 PNG,每种格式都具有优缺点. 相比任何基于光栅的格式,SVG 具有多项优势: SVG 图形是使用数学公式创建的,需要在源文件中存储的数据要少得多,因为您无需存储每个独立像素的数据. 矢量图形可更好地缩放.对于网络上的图像,尝试从原始大小放大图像可能产生失真(或像素化的)图像. 原始像素数据是针对特

H5 内联 SVG

HTML5 内联 SVG HTML5 画布 HTML5 画布 vs SVG HTML5 支持内联 SVG. 什么是SVG? SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用于定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失 SVG 是万维网联盟的标准 SVG 的优势 与其他图像格式相比(比如 JPEG 和 GIF),使用 SVG 的优势在于: SVG 图像可通过文本编辑器来创建和修

Html5之高级-8 HTML5 SVG(概述、元素)

一.SVG 概述 SVG 概念 - SVG (Scalable Vector Graphics) 是一种使用XML技术描述二维图形的语言 - SVG 可以使用三种方式描述二维图形 - 矢量图 (vector graphic shapes),例如直线或曲线构成的路径 - 图片(images) - 文本(text) SVG 优势 - SVG 可通过文本编辑器来创建和修改 - SVG 可被搜索.索引.校本化和压缩 - SVG 可在任何的分辨率下被高质量地打印 - SVG 可在图像质量不下降的情况下被放

【转载】什么是SVG

SVG是一种采用XML来描述二维图形的语言.SVG可以构造三种类型的图形对象:矢量图形.位图图象和文字.图形对象可以被组化.样式化.变形和重新组合,包括图象嵌套.变形处理.剪辑路径.Alpha蒙板.滤镜特效和模板对象. SVG图形可以是动态的.可交互性的.动画通过直接声明(比如在SVG里嵌入SVG动画元素)或通过脚本来进行定义或触发. SVG通过使用脚本语言来完成比较复杂的应用,脚本语言调用SVG对象模型(SVG Document Object Model)来访问或控制所有的元素.属性和属性值.

svg简介与使用

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

数据可视化系列--svg入门基础(一)

一.前言 1.SVG(Scalable Vector Graphics)可伸缩矢量图形 特点: (1)使用xml格式来定义图形: (2)用来定义web上的使用的矢量图: (3)改变图像尺寸,图片质量不受损: (4)所有元素属性可以使用动画: (5)继承了W3C标准,在html中使用方式,html直接嵌入svg内容,或者直接引入svg文件. /* svg标签,这里的rect为矩形,在后面的图形元素中会详细说明 */ <svg width="200" height="200