HTML入门11
在网页中添加矢量图形,
使用矢量图形在很多情况下,效果较好,拥有较小的文件尺寸,高度缩放,下面具体讲解如何在网页中添加矢量图形
位图和矢量图
位图文件包含了每个像素的位置和色彩信息,流行的位图格式包括Bitmap(.bmp),PNG(.png),JPEG(.jpg)和GIF(.gif)
矢量图使用算法来定义,一个矢量图包含了图形和路径的定义,电脑可以根据这些定义计算出他们在屏幕上时呈现的样自,SVG用于创造精彩的web矢量图形。矢量图相对于同样的位图有更小的体积,因为仅需存储少量的算法,而不是逐个存储每个像素的信息。
SVG的定义
SVG用于描述矢量图形的XML语言,基本上时像HTML一样的标记,用于图形,有一些简单元素来出创建简单图形。<circle><rect><feColorMatrix>(变换矩阵转换颜色) <animate>矢量图形的动画部分,<mask>在图像顶部应用蒙版。下面展示i一个简单的例子:
<svg version="1.1" baseProfile="full" width="300" height="2000" xmlns="http://www.w3.org/2000.svg">
<rect width="100%" height="100%" fill="back" />
<circle cx="150" cy="100" r="90" fill="blue" />
</svg> 可以使用illustrator来创建各种插图,
SVG其他优点,矢量图形中的文本仍然可访问利于SEO,可以很好的适应样式/脚本。缺点 ,SVG非常容易变得复杂,文件大小会增加也会占用浏览器很长的处理时间。
SVG可能比栅格图像更难创建,取决于创建那种图像,SVG从IE9开始支持,因此光栅图形跟适合照片那样复杂精密的图像。
将SVG添加到页面,使用img快捷方式,用src属性引用SVG。示例如下:
1 2 3 4 5 | < img src="equilateral.svg" alt="triangle with all three sides equal" height="87px" width="100px" /> |
优点,快速,熟悉的图像语法,alt属性提供的内置文本等效,可以通过a元素嵌套img使图像成为超链接。 缺点,无法使用js实现操作图像,如果要操作样式必须内联CSS样式,外部样式不起作用,也不能用CSS伪类来重设图像样式(:focus)
兼容性,对于不支持SVG IE8及更低版本,Android2.3及更低版本的浏览器,可以从src属性引用png或jpg,并使用srcset属性,只有最近的浏览器才能识别来引用SVG,这样支持SVG的浏览器将使用SVG,较旧的浏览器将加载PNG, 同样也可以通过CSS来讲SVG设置成背景图像,
background:url("fallback.png") np-repeat cener;
background-image:url("image.svg");
background-size:contain;
同样这种方式引入的SVG无法被js操作,样式设置也有了限制,限于内联样式。
引用SVG时,确保内联SVG即在标签内,优点,SVG内联减少HTTP请求,减少加载时间。
使用id或class选定SVG元素,添加央视规则。内联SVG唯一可以让CSS与其交互,CSS动画的方法,同样也可以包裹在a元素里,成为超链接。
缺点:多次使用导致资源密集难以维护, SVG增加HTML文件大小, 浏览器不能像缓存普通图片一样缓存内联SVG, 在<foreignObject>元素中 包含回退,支持SVG的浏览器让然会下载后备图像。
使用iframe嵌入SVG 像在网页中打开网页一样,打开SVG图像,
1 2 3 | < iframe src="triangle.svg" width="500" height="500" sandbox> < img src="triangle.png" alt="Triangle with three unequal sides" /> </ iframe > |
来分析下这种情况的优缺点,iframe有回退机制,如果浏览器不支持iframe,则只会显示回退,此外,除非SVG和您的当前网页有相同的origin,否则不能在主页面上使用js操作SVG.
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· DeepSeek 解答了困扰我五年的技术问题
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库