第七节 html5学习——内联SVG

最新推荐文章于 2024-07-21 21:28:12 发布

yingzhaom

最新推荐文章于 2024-07-21 21:28:12 发布

阅读量351

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/yingzhaom/article/details/8522694

本文介绍SVG的基本概念及其在HTML5中的应用。SVG是一种基于XML的矢量图形格式，具有良好的可伸缩性和高质量打印能力。文章详细阐述了SVG相较于JPEG和GIF等格式的优势，并展示了如何将SVG直接嵌入到HTML5页面中。

HTML5 支持内联 SVG。

什么是SVG？

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用于定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
SVG 是万维网联盟的标准

SVG 的优势

与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：

SVG 图像可通过文本编辑器来创建和修改
SVG 图像可被搜索、索引、脚本化或压缩
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不下降的情况下被放大

浏览器支持

Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持内联 SVG。

把 SVG 直接嵌入 HTML 页面

在 HTML5 中，您能够将 SVG 元素直接嵌入 HTML 页面中：

实例

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

</body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

yingzhaom

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

HTML实现端午节主题网站：龙舟争渡，凭吊祭江诵君赋。

Code_流苏：在代码中寻诗意，在实践中觅真知

05-31

725

端午节到了，祝大家端午安康，好运接粽而至！

HTML5 内联 SVG

www.i201314.net

10-11

582

HTML5 支持内联 SVG。什么是SVG？ SVG 指可伸缩矢量图形 (Scalable Vector Graphics)SVG 用于定义用于网络的基于矢量的图形SVG 使用 XML 格式定义图形SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失SVG 是万维网联盟的标准 SVG 的优势与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG

参与评论您还未登录，请先登录后发表或查看评论

html5 svg defs,defs_分类 | Elements_SVG_参考手册_非常教程

weixin_42099302的博客

06-30

485

defsSVG允许定义图形对象以备后用。建议尽可能在元素内部定义引用的元素。在元素中定义这些元素可以提高SVG内容的可理解性，从而提高可访问性。元素中定义的图形元素不会被直接渲染。您可以使用元素在视口中的任何位置呈现这些元素。用法上下文分类集装箱元素，结构元素允许的内容任意数量的下列元素，以任何顺序排列：动画元素描述元素图形元素结构元素渐变元素, , , , , , , , , , , , , ,...

HTML5 SVG 3D完整实现示例

01-11

HTML5 SVG 3D 效果实现示例，附带全部代码

html——SVG

weixin_30824277的博客

03-09

SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用于定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失 SVG 是万维网联盟的标准使用 SVG 的优势在于： SVG 图像可通过文本编辑器来创建和修改 SVG 图像可被搜索、索引、脚本化或压缩 SVG 是可伸缩...

html中内联svg嵌入元素,CSS：内联SVG之前

weixin_30096975的博客

06-07

441

更新感谢porneL指出了生成的内容和替换的元素之间的关系。有趣的是，名为“CSS3生成和替换的内容模块”的W3C文档(从11年前开始！)定义了伪元素:outside，该伪元素可以通过将生成的内容放置在替换的元素之外来提供使用生成的内容的解决方案。，而不是尝试将其附加到内部。原始问题有没有一种使用CSS:before和:after伪元素来样式化内联SVG元素的方法？在此示例中，使用定义的样式:be...

HTML5学习笔记（总结提炼版）——001

03-14

4. SVG矢量图：支持内联SVG，可以创建高质量、可缩放的图形，且文件大小相对较小。 5. 存储机制：Web Storage（包括localStorage和sessionStorage）提供了本地存储数据的能力，增强了离线应用的功能。 6. 表单控制...

HTML5和CSS3 WEB技术开发

张晨光老师的播客

01-02

7301

B站视频参考：https://www.bilibili.com/video/BV1H44y1k7ze/[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uwbid43Z-1672665963237)(asseits/image-20210831212039584.png)]HTML:超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。 HTML 不是一种编程语言（C、Java、python、R等），而是一种标记语言 (markup

HarmonyOS Next开发学习手册——ArkWeb

最新发布

maniuT的博客

07-21

1619

ArkWeb（方舟Web）提供了Web组件，用于在应用程序中显示Web页面内容，为开发者提供页面加载、页面交互、页面调试等能力。页面加载：Web组件提供基础的前端页面加载的能力，包括加载网络页面、本地页面、html格式文本数据。页面交互：Web组件提供丰富的页面交互的方式，包括：设置前端页面深色模式，新窗口中加载页面，位置权限管理，Cookie管理，应用侧使用前端页面JavaScript等能力。页面调试：Web组件支持使用 Devtools工具调试前端页面。

HTML5基础知识入门知识学习文档

03-26

HTML5引入内联SVG，使得网页可以直接嵌入矢量图形，提高了图形质量，尤其在高分辨率屏幕上的表现更佳。 5. 视频和音频支持：HTML5引入了和元素，使得在浏览器中直接播放多媒体内容成为可能，不再依赖Flash等插件。...

基于HTML5 SVG的跨设备jQuery图表插件

07-06

基于HTML5 SVG的跨设备jQuery图表插件

html5绘制地图

10-11

html5绘制地图,Inkscape PNG转换SVG工具

SVG 版世界地图

04-18

SVG版世界地图，文件格式xml，可以通过浏览器打开，适合相关学习~

html5svg地图api,JS API - 开发指南

weixin_36263001的博客

06-17

400

地图覆盖物概述所有叠加或覆盖到地图的内容，我们统称为地图覆盖物。如标注、矢量图形元素(包括：折线和多边形和圆)、信息窗口等。覆盖物拥有自己的地理坐标，当您拖动或缩放地图时，它们会相应的移动。地图API提供了如下几种覆盖物：Overlay：覆盖物的抽象基类，所有的覆盖物均继承此类的方法。Marker：标注表示地图上的点，可自定义标注的图标。Label：表示地图上的文本标注，您可以自定义标注的文本内容...

html5svg地图api,使用SvgMarker

weixin_39673601的博客

06-17

406

使用SvgMarker.my-svg-marker .amap-simple-marker-label {color: #fff;font-size: 20px;}.my-shape-ShieldPin .amap-simple-marker-label,.my-shape-SquarePin .amap-simple-marker-label,.my-shape-WaterDrop .amap-...

2.SVG概念及其优势

weixin_41331534的博客

12-05

2081

1.SVG（指可缩放矢量图形，格式：矢量图，类型：图形格式）； ·用来定义网络的基于矢量的图形； ·SVG使用XML格式定义图形； ·SVG图像在放大或者改变尺寸的情况下其图形质量不会有所损失； 2.优势 ·SVG 可被非常多的工具读取和修改(比如记事本)； ·SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强； ·SVG 是可伸缩的； ·SVG 图像可在任何的分辨率下被高质量...

html5svg地图api,自定义图层-SVG

weixin_36258891的博客

06-17

350

自定义图层-SVGhtml,body,#container {margin: 0;padding: 0;width: 100%;height: 100%;}var starCenter = [116.306206, 39.975468]var map = new AMap.Map('container', {center: starCenter,zoom: 3,});map.plugin(['AM...

5.SVG文档结构

五石之瓠以为大樽浮于江湖悠笑人生

10-11

1248

Chapter 5. Document Structure 我们偶然提到过，SVG 允许您将文档的结构与其表示分离。在这一章中，我们将比较和对比这两者，更详细第讨论文档外观方面，然后展示一些 SVG 元素，这些元素您能够使文档结构更加清晰，更容易阅读，更容易维护。 Structure and Presentation 就像章节 1 提到的那样，在 Basic Shapes 中，XML的目的使提供一种方法来组织数据，并将这个结构从它的视觉呈现中分离出来。想一想那一章中画的猫。你识别出它是一只猫，是因为它的结构

SVG 基础知识笔记

NT_cc的博客

05-25

2372

SVG 是万维网联盟的标准。它使用 XML 格式定义图像。SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体。SVG全称是 Scalable Vector Graphics，意为可缩放矢量图形。SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失。2003年1月14日 SVG 1.1 被Sun公司、Adobe、苹果公司、IBM 以及柯达等共同确立成为W3C推荐标准。学到老，活到老。不积跬步无以至千里，学习亦是如此。

HTML5 SVG图形鼠标悬停动画效果实现指南

HTML5和SVG是现代网页设计和开发中经常用到的技术。HTML5带来了大量的新特性，包括对音频、视频、图形和动画的原生支持，而SVG（可缩放矢量图形）是一种基于XML的图形格式，用于描述二维矢量图形。结合这两个技术，...