网页使用svg（如何向网页添加 SVG）

：暂无数据 2026-08-09 10:40:01 ：0

各位老铁们好，相信很多人对网页使用svg都不是特别的了解，因此呢，今天就来为大家分享下关于网页使用svg以及如何向网页添加 SVG的问题知识，还望可以帮助大家，解决大家的一些困惑，下面一起来看看吧！

本文目录

如何向网页添加 SVG
网页中用什么格式的字体 eof/svg/ttf/woff/woff2
如何在网页中使用SVG

如何向网页添加 SVG

SVG 文件可通过以下标签嵌入 HTML 文档：《embed》、《object》或者《iframe》。
HTML 页面中的 SVG
下面，你会看到三种把 SVG 文件嵌入 HTML 页面的不同方法。
使用《embed》标签
《embed》标签被所有主流的浏览器支持，并允许使用脚本。
注释：当在 HTML 页面中嵌入 SVG 时使用《embed》标签是 Adobe SVG Viewer 推荐的方法！然而，如果需要创建合法的 XHTML，就不能使用《embed》。任何 HTML 规范中都没有《embed》标签。
语法：
***隐藏网址***
注释：pluginspage 属性指向下载插件的 URL。
使用《object》标签
《object》标签是 HTML 4 的标准标签，被所有较新的浏览器支持。它的缺点是不允许使用脚本。
注释：假如您安装了最新版本的 Adobe SVG Viewer，那么当使用《object》标签时 SVG 文件无法工作（至少不能在 IE 中工作）！
语法：
***隐藏网址***
注释：codebase 属性指向下载插件的 URL。
使用《iframe》标签
《iframe》标签可工作在大部分的浏览器中。
语法：
《iframe src="rect.svg" width="300" height="100"》《/iframe》
我期望….
如果仅仅通过引用 SVG 的命名空间，就能够把 SVG 元素之间添加到 HTML 代码中，那就太棒了，这像这样：
***隐藏网址***

网页中用什么格式的字体 eof/svg/ttf/woff/woff2

早期电脑显示的字体都是点阵字体，通过像素点标记字符，这种方式节省电脑运算量，但显示效果差，字体一旦放大就出现锯齿甚至马赛克问题。1980年代中期，苹果公司推出 Macintosh 电脑（Mac系列早期型号），在文字处理上使用新的矢量字体取代点阵字体，在文字显示效果上独领风骚。为了支持矢量字体，苹果定义了一套标准的字体数据结构格式：SFNT。平滑的字体技术加上独立设计的新字体，也成为 Macintosh 畅销的卖点之一。

SFNT 发布后，Adobe公司紧接着发布了 Type 1 PostScript 字体，通过与 PostScript 系列工具的整合抢占市场。为了对抗 Adobe 的 PostScript，苹果设计开发了 TrueType 字体，后来微软也加入了 TrueType 的开发。事情后来的发展违背了苹果的预期，微软成功的把 TrueType 全面集成到 Windows3.1 中，而 Macintosh 电脑上却是 PostScript 成为主导字体。

1991年，微软与 Monotype 公司合作，制作了一批高质量 TrueType 字体，同时兼容PostScript字体集成进 Windows。

1994年，微软开发了 TrueType Open “智能字体”技术。

TrueType字体文件后缀名（*.ttf）

1996年，Adobe公司加入 TrueType Open 的开发，随后 TrueType Open 与 Adobe Type 1 合并并成立新项目：OpenType。

OpenType字体文件后缀名（*.otf）

1997年，微软发布的IE4中支持将压缩后的 OpenType 文件嵌入到浏览器（Embedded OpenType）的技术。这标志这浏览器使用特定字体能力的开始。

Embedded OpenType字体文件后缀名（*.eot）

2006年，浏览器纷纷开始支持主流的 OpenType 字体标准。

2007年，OpenType 成为 ISO 标准，以ISO/IEC 14496-22发布。

2008年，W3C委员会拒绝了微软提出的将Embedded OpenType字体作为标准的提案。

2009年，Mozilla 开始测试一种 OpenType 的字体压缩技术：Web Open Font Format（简称WOFF）。同年，Mozilla、Opera、微软共同向W3C提交 WOFF提案。

Web Open Font Format字体文件后缀名（*.woff）

2010年，W3C将WOFF发布为草案，并进行推广。

WOFF 压缩格式的2个特点：

2014年，WebFont 工作组发布了 WOFF2 草案。同年，Chrome 38 版本移除了对 SVG 字体的支持。

2018年，WOFF2标准成为 W3C 推荐标准。

目前的字体库主要通过字体工具生成（比如百度字体工具），并直接使用字体工具提供的CSS引用方法。字体工具为了兼容，会包含不同的字体文件，典型的引用方式如图

而实际上，考虑到 woff2 在浏览器的兼容性上已经表现的足够好。完全可以只使用 woff2 这一种字体。当然，如果你还要兼容IE，那么还需要使用eot字体。

备注：在IE上其实可以使用退化兼容方案，也就是在页面中只使用 woff2 字体，IE不识别，无法使用，也仅是使用浏览器默认字体，不影响页面功能。

***隐藏网址***
***隐藏网址***
***隐藏网址***
***隐藏网址***
***隐藏网址***

如何在网页中使用SVG

通过《img /》标签
这可能是最简单的使用SVG的方法，而且是开发者最熟悉的方法。SVG文件能够像位图一样通过《img /》标签在网页上使用。
缺点是：SVG图像可能包含动画，但链接里面的文件和任何脚本和交互的SVG代码部分将被忽略。
通过CSS
可以通过CSS来有效的使用SVG：像位图一样，SVG文件能够通过background-image实现来渲染。
通过@font-face作为字体使用
大多数字体都是矢量图形，SVG可以通过CSS来作为文字嵌入到网页中，从而替代.woft、.otf 和 .eof 格式的文字。代码像下面这样：
@font-face {font-family: GabbaGrabba; url(’gabbagabba.otf’) format(’opentype’),url(’gabbagabba.svg#gabba’) format(’svg’);}
因为它们缺乏真正的字体控制如字距和有限的浏览器支持，应该在使用SVG文字时给它们一个回退的方法。

如果你还想了解更多这方面的信息，记得收藏关注本站。

网页使用svg（如何向网页添加 SVG）