`

SVG 嵌入 HTML页面的几种方式

    博客分类:
  • svg
svg 
阅读更多
SVG 嵌入 HTML页面的几种方式
SVG目前嵌入HTML页面中有下面几种方式

OBJECT


< object data = " rect.svg "  width = " 300 "  height = " 100 " 
type = " image/svg+xml "
codebase = " http://www.adobe.com/svg/viewer/install/ "   />
采用Object标签的一个好处是,这是一个标准的Html 4及以上规范的有效Tag,但可惜的如果你用的是最新的Adobe Viewer,那么反而是显示不出图象来:)

EMBED

< embed  src ="rect.svg"  width ="300"  height ="100" 
type ="image/svg+xml"
pluginspage ="http://www.adobe.com/svg/viewer/install/"   />
这是推荐的一种写法,在ie与ff中,皆可工作,也可通过script使HTML与SVG相互通信,但不幸的是,embed不是一个规范的标签,所以不能直接用在严格的XHTML中,不过这个可以能过一个简单的trick来解决,改动一下DTD定义即可。

IFRAME

< iframe  src ="rect.svg"  width ="300"  height ="100" >
</ iframe >
这个方式没什么好说的,完全OK,就是iframe的边框需要额外设置一下。


当然最希望看到的就是类似于下面的代码能早点在主流Browser中支持

< html
xmlns:svg ="http://www.w3.org/2000/svg" >
< body >< p > This is an HTML paragraph </ p >< svg:svg  width ="300"  height ="100"  version ="1.1"   >
< svg:circle  cx ="100"  cy ="50"  r ="40"  stroke ="black"
stroke-width ="2"  fill ="red"   />
</ svg:svg ></ body >
</ html >
目前还不行,呵呵。

分享到:
评论

相关推荐

    html中嵌入svg的几种方法

    HTML 中嵌入 SVG(Scalable Vector Graphics)图像有多种方法,SVG 是一种基于 XML 的矢量图格式,它能够提供清晰的高质量图形,并且在放大时不会失真。以下是一些常用的方法: 1. **内联 SVG**: 在 HTML 文件中...

    SVG图画基于HTML5

    在HTML5中,SVG的使用方式有以下几种: 1. **内联SVG**:直接在HTML文档中插入SVG代码,作为HTML的一部分。 2. **SVG图像标签**:使用`&lt;img&gt;`标签引用外部SVG文件,类似于普通图像文件。 3. **背景图像**:将SVG...

    svg在web页面中的显示工具

    3. 将SVG内容嵌入或链接到页面:你可以选择将SVG代码内联写入HTML,或者通过`&lt;object&gt;`或`&lt;img&gt;`标签链接到外部SVG文件。 ```html &lt;!-- 内联SVG --&gt; &lt;svg width="100" height="100"&gt; &lt;/svg&gt; &lt;!-- 外链SVG --&gt; ...

    HTML5 SVG Drawing Animation

    具体实现SVG动画时,有几种常见的技术: 1. **使用CSS3动画**:可以给SVG元素添加CSS类,并利用CSS3的`@keyframes`规则定义动画的各个帧。通过改变`animation-duration`, `animation-delay`, `animation-timing-...

    网页中显示SVG图片

    以下是几种在HTML5中显示SVG图片的方法: 1. **内联SVG**: 在HTML文档中直接嵌入SVG代码。例如: ```html &lt;svg width="100" height="100"&gt; &lt;/svg&gt; ``` 这将创建一个100x100的SVG画布,并在其中填充一个...

    svg-html.zip

    在HTML5中,SVG可以通过以下几种方式集成: 1. **内联SVG**:直接将SVG代码嵌入到HTML文档中,使用`&lt;svg&gt;`标签来定义图形区域。这种方法便于直接通过CSS或JavaScript进行交互式操作。 2. **作为图像元素**:使用`...

    svg图在各种浏览器中显示

    为了确保跨浏览器的兼容性,有几种解决方案: 1. **VML或Flash fallback**:对于不支持SVG的浏览器,可以使用VML(Vector Markup Language)或Flash作为备选方案。但随着Flash的退役,这种方法已逐渐被淘汰。 2. **...

    HTML5 SVG图形变形效果

    HTML5 SVG图形变形效果是现代网页设计中一种引人注目的技术,它允许开发者创建动态、交互式的矢量图形。SVG(Scalable Vector Graphics)是一种基于XML的图像格式,可无限缩放而不失真,适合用于网页和移动设备。在...

    SVG与html的交互(svg的js与html的js互调用)[参照].pdf

    2. **跨域通信**:由于SVG被嵌入HTML中,它们共享同一个DOM树,因此可以互相访问对方的元素和函数,就像同一页面内的不同部分一样。 3. **窗口对象**:`window.parent`用于获取包含当前SVG的父窗口,这样可以从SVG中...

    html5 svg打开盒子爆炸动画特效

    HTML5的SVG支持使得开发者能够在网页中直接嵌入矢量图形,这些图形可以无限缩放而不会失真,而且文件体积小,加载速度快。 SVG,全称Scalable Vector Graphics,是一种基于XML的矢量图像格式。它可以用来描绘复杂的...

    html5 svg打造8种超酷选择单选按钮和复选框的动画

    HTML5是一种强大的网页开发技术,它为网页设计者和开发者提供了更多创新的可能性。SVG(Scalable Vector Graphics)是HTML5中的一个关键组件,用于创建高质量的矢量图形,这些图形在任何分辨率下都能保持清晰,非常...

    html5 svg动画天气预报图标特效

    SVG是一种基于XML的矢量图形格式,它允许在网页上绘制清晰、可缩放的图形,无论放大多少倍都不会失真。SVG图标的一大优势在于它们可以被CSS样式控制,包括颜色、填充、动画效果等,这使得SVG成为创建动态图标和图形...

    svg参考资料链接

    SVG是一种基于XML的矢量图像格式,它能够以清晰的分辨率在任何尺寸下显示图形,而且文件大小相对较小,适合用于网页和其他需要高质量图像的应用。 博文链接可能提供了一个关于SVG技术的深入探讨,包括其基本概念、...

    HTML5 SVG木柴燃烧火焰特效.zip

    2. `&lt;svg&gt;`元素:这是SVG图形的基本容器,用于在网页中嵌入矢量图形。 3. `&lt;script&gt;`元素:用于引入JavaScript文件,这些文件将控制火焰的动画效果。 4. `&lt;style&gt;`元素或外部CSS文件:用于定义元素样式,包括SVG...

    svg实例 代码下载

    SVG,全称Scalable Vector Graphics,是一种基于XML的矢量图像格式,广泛应用于网页设计、移动应用和软件开发中。SVG图像具有清晰的分辨率,无论放大多少倍都能保持其清晰度,这使得它在需要高质量图形的场景下非常...

    HTML5 SVG轻量级JS圆形进度条特效源码.zip

    在HTML5中集成SVG,可以通过以下几种方式: 1. 内联方式:直接在HTML文档中嵌入SVG代码。 2. `&lt;img&gt;`标签:通过URL引用SVG文件。 3. `&lt;object&gt;`标签:像嵌入其他外部资源一样嵌入SVG文件。 4. `&lt;iframe&gt;`标签:将SVG...

    生成SVG背景图形和图案_JavaScript_HTML_下载.zip

    有几种方法可以做到这一点:内联方式(直接在HTML文档中编写SVG代码)、`&lt;object&gt;`元素引用外部SVG文件,或者使用`&lt;img&gt;`元素加载SVG图像。内联方式通常用于简单的图形,而`&lt;object&gt;`和`&lt;img&gt;`更适合于大型、复杂或...

    浅析js实现网页截图的两种方式

    【网页截图技术浅析:JS实现的两种方法】 在Web开发中,虽然网页截图并不是一个常见的需求...选择哪种方式取决于具体的应用场景和性能需求。在实际项目中,可以根据需求评估这两种技术的适用性,以找到最佳解决方案。

Global site tag (gtag.js) - Google Analytics