如何在网页上放置svg图形(put svg graphics on your webpage)
SVG（Scalable Vector Graphics，可缩放矢量图形）使您的站点能够绘制和呈现复杂的图像，但使用它们不仅仅是简单地在HTML中添加标签。要使它们显示并且页面有效，必须使用以下三种方法之一。
使用对象标记嵌入svg
此HTML标记将在网页中嵌入SVG图形。编写带有数据属性的对象标记，以定义要打开的SVG文件。包括以像素为单位的宽度和高度属性，以定义SVG图像的尺寸。
为了实现跨浏览器兼容性，请包括type属性，如下所示：
type="image/svg+xml"您的对象将如下所示：
使用svg对象的提示
确保代码中的宽度和高度至少与嵌入的图像一样大。否则，您的图像可能会被剪裁。
如果未包含正确的内容类型，则SVG可能无法正确显示，如下所示：
type="image/svg+xml"使用嵌入标记嵌入svg
在该方法中，使用与对象标记几乎相同的属性，包括宽度、高度和类型。唯一的区别是将SVG文档URL放在src属性中。
您的嵌入将如下所示：
src="http://your-domain.here/z-circle.svg" width="210" height="210" type="image/svg+xml"/>使用embed for svg的提示
嵌入标记是有效的HTML5，但不是HTML4。记住在src属性中使用完全限定的域名以实现兼容性。
使用iframe包含svg
另一种包含SVG图像的简单方法是通过iFrame。此方法需要三个属性：通常的宽度和高度，以及指向SVG文件位置的src。
您的iframe将如下所示：
使用iframe for svg的提示
除非使用样式删除边框，否则iframe将在图像周围显示边框，例如：
style="border:none;"iframe没有指定插件位置，因此如果访问者的浏览器没有插件，他们可能什么也看不到，或者可能会看到错误消息。为了避免这种情况，请在iframe开始和结束标记中包含一些文本。
- 发表于 2021-09-04 21:32
- 阅读 ( 115 )
- 分类：IT
你可能感兴趣的文章
如何在adobeillustrator中设计名片
...创建一个真正的个人信息。这就是为什么现在是开始学习如何设计自己的卡片的最佳时机。通过展示你的技能，你会脱颖而出。 ...
如何在office 2016中插入和编辑可缩放矢量图形
... 所有这些问题的常见答案是SVG（Scalable Vector Graphic）。 ...
今年圣诞节你需要注意的3个facebook骗局
... 不，我们不是在抱怨社交网络是如何吞噬时间，或者通过向你展示其他人相处得有多好而让你沮丧。相反，你应该关注网络犯罪分子是如何利用Facebook来欺骗你的——在两种情况下，他们甚至让你成为犯...
15个免费的photoshop资源用于你的信息图表
...难。如果您希望对现有数据使用模板，那么可能需要考虑如何准确地表示该数据并基于特定条件搜索模板。 ...
什么是人工智能文件？如何打开它没有adobe illustrator
... 如何在没有illustrator的情况下打开ai文件 ...
linux的5个最佳adobe illustrator替代方案
... 什么是矢量图形软件(vector graphics software)？ ...
如何制作矢量图像：5个在线工具
... 如何在线创建矢量图像 ...
如何在windows10文件资源管理器中获取svg缩略图
...可以在文件资源管理器中看到缩略图，没有问题。下面是如何设置它 安装powertoys 要在文件资源管理器中查看SVG缩略图，您需要来自Microsoft的免费PowerToys实用程序的帮助，您可以从GitHub免费下载该实用程序。最新版本通常列在...
adobeflash死了：这是什么意思
...图形，Flash成功的最初原因之一，也是与SVG（scalable vector graphics，可伸缩矢量图形）格式相当的现代图形。SVG文件的使用使得创建在智能**或大型电视上看起来像素完美的网站和应用程序成为可能。 2021年及以后访问flash内容 既然...
什么是svg文件，如何打开？
...展名为“SVG”的图形文件。这些文件有什么特别之处，您如何查看它们？我们会解释的。 什么是svg文件(an svg file)？ 在计算机图形学的上下文中，SVG代表“可缩放的矢量图形”。SVG文件是一种计算机文件，它使用万维网联盟定...
0 篇文章
