SVG入门-嵌入XML和转Base64

最新推荐文章于 2024-05-14 23:51:42 发布
最新推荐文章于 2024-05-14 23:51:42 发布
阅读量4.3k 收藏 1
点赞数 1
分类专栏： SVG 文章标签： svg
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baidu_38242832/article/details/115193875
版权
<foreignObject>标签

<foreignObject>是SVG的一个子标签，这个标签中可以用于显示普通的DOM标签。也就是渲染XHTML元素。

举个例子：

<svg xmlns="http://www.w3.org/2000/svg">
  <foreignObject width="120" height="50">
      <body xmlns="http://www.w3.org/1999/xhtml">
        <p>文字。</p>
      </body>
    </foreignObject>
</svg>

在这里插入图片描述
可以看到<foreignObject>标签里面有一个设置了xmlns="http://www.w3.org/1999/xhtml"命名空间的<body>标签，此时<body>标签及其子标签都会按照XHTML标准渲染，实现了SVG和XHTML的混合使用。

添加到<foreignObject>标签中的XHTML节点的渲染效果跟在非SVG里面的渲染效果一定，同样也支持CSS样式，但必须是内联样式。chrome浏览器能支持style标签里面定义的样式。

SVG转Base64
var svg = new Blob([svgString], {
   type: "image/svg+xml;charset=utf-8"});
最低0.47元/天 解锁文章
natsu-cc
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
SVG —— 基于XML语法的可缩放矢量图形
Janner668的博客
02-23 963
SVG & ECharts SVG Scalable Vector Graphics 可缩放的额矢量图形，基于XML语法的可缩放矢量图形 JPG PNG的图片都是位图，放大后会出现锯齿状 比如，百度地图就类似于矢量图，放大后不失真 SVG的应用场景 地图 图表 SVG的使用方式 标记 <img src="SVG文件的URL地址"> CSS中的background-image属性 seletor{ background-image:url(SVG文件URL地址) } 案例(1
漂亮图标SVG150-css3-svg-icons
07-29
- **数据URI**：将SVG文件编码为Base64，作为数据URI嵌入到CSS或HTML中。 4. **实际开发中的考虑**： - **浏览器兼容性**：虽然现代浏览器广泛支持SVG和CSS3，但老版本的浏览器可能需要提供备选方案，如使用PNG...
XML的SVG知识总结
zyz00000000的博客
09-17 7033
1. SVG （Scalable Vector Graphic）可缩放矢量图形 svg是使用 XML 来描述二维图形和绘图程序的语言，是个行级标签 场景：图标、图标icon、动效、矢量图（放大后不失真）  注意：canvas是js控件，运行性能比svg标签好 2. svg在HTML中的用法 （1）可以通过头部引入css文件（最好使用这种） （2）可以写在style标签中 （3）可以写...
css3 svg 背景图 data:image/svg+xml;base64
热门推荐
liujing319的专栏
04-17 4万+
css3 svg 背景图 data:image/svg+xml;base64 background: #fff url(data:image/svg+xml;base64
VUE读取svg文件 修改svg图标颜色 base64编码图标路径并展示(1)
最新发布
2401_84091544的博客
05-14 353
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
图片SVG转PNG格式 data:image/svg+xml；base64 转 data:image/png；base64
射手男很懒的博客
08-03 5637
const img = new Image(); // 创建图片容器 img.src = imageBase64; //imageBase64 为svg+xml的Base64 文件流 img.onload = () => { // 图片创建后再执行，转Base64过程 const canvas = document.createElement('canvas'); canvas.width = 660; /...
react开发笔记(一)：渲染验证码图片报错data:image/svg+xml；base64,undefined net::ERR_INVALID_URL
summer_gf的博客
11-19 1492
刚进入页面的时候img的src会报错data:image/svg+xml;base64,undefined net::ERR_INVALID_URL，解决办法就是在请求返回的时候拼接好src再赋值到img。
Data URI scheme
weixin_43295106的博客
10-21 581
Data URI scheme 介绍 image/png 是数据类型名称，base64 是数据的编码方法，逗号后面就是这个image/png文件base64编码后的数据 案例： background-image:url('data:image/png;base64,此处为编码'); 优点：将一些小图片嵌入到网页中，节省http请求 缺点：浏览器不会缓存图片 Data URI scheme支持的类型有 data:,文本数据 data:text/plain,文本数据 data:text/html,HTML代码
svg字符串格式转为base64
m0_64303519的博客
03-19 2001
/ 返回data URI。
data-uri:一个用于将文本和文件转换为数据URI的Web应用程序
05-17
在数据URI中，SVG图标可以被直接嵌入，使得它们能够自适应不同分辨率和屏幕大小，同时保持清晰。 3. **JavaScript模板字符串文字**：这是ES6引入的一种新特性，使用反引号（`）包裹的字符串，可以方便地插入变量和...
svg-html.zip
07-03
SVG（Scalable Vector Graphics）是一种基于XML的矢量图像格式，它允许开发者在Web上创建和展示高质量的图形，这些图形可以无限放大而不会失去清晰度。HTML5的引入，使得SVG可以直接嵌入到HTML文档中，极大地丰富了...
小试SVG之新手小白入门教程
10-17
SVG，全称Scalable Vector Graphics，是一种基于XML的矢量图像格式，它允许开发者创建出清晰、可缩放的图形，无论放大多少倍都不会失真。与传统的位图（如JPEG、PNG）不同，SVG不依赖像素处理，而是通过描述图形的...
svg转css，css转svg，svg与css互相转换并压缩
05-23
SVG是一种基于XML的矢量图像格式，能够提供高质量、可缩放的图形，而CSS则用于定义网页的样式和布局。在某些情况下，开发者可能需要将SVG转换为CSS，或者反过来，以便更好地管理和优化资源。同时，为了提高性能和...
svg + image/svg+xml 文件上传实现xss
qq_45616570的博客
12-03 5262
svg + image/svg+xml 文件上传实现xss 环境：dvwa靶场 靶场关卡：文件上传 靶场难度：低级 我的吾爱破解帖子：XSS新思路-----XSS+SVG漏洞复现 https://www.52pojie.cn/thread-1554237-1-1.html (出处: 吾爱破解论坛) 复现过程 调整靶场难度为low 选择文件上传关卡，选择一个图片或者其他文件均可，本关是任意文件上传。我使用的是一个png图片。 打开代理，使用burpsuite进行抓包 点击上传按钮，
前端 img图片如何 展示 base64 格式（并且下载到本地）
qq_42174597的博客
05-04 8466
img 如何 展示 base64格式图片，并且可以下载到本地。
svg图片代码data:image/svg+xml转png图片方法
09-14 2115
fill='%23000000’这里表示颜色 ,后面6位0表示黑色,只修改后6位即可。把代码保存为html格式的文件中,用浏览器访问,即可右键保存。注意:src=""图片地址中,一些参数的含义。从AI软件或其它网站得到svg图片代码后,viewBox是图片显示区域,宽,高等。d=‘这里是图片代码数据’
css data:image/svg+xml 不显示
foreverling_ling的博客
10-06 4433
原因：新版chrome不支持 # , 需要改成%23 如： .toggle:after { content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="40" fill="none" stroke="#ededed" stroke-wi
[BSidesCF 2019]SVGMagic XXE的SVG注入
qq_54929891的博客
05-13 815
进入题目可以看到叫我们利用魔法将SVG转为PNG,查资料了解一下SVG是个啥东西XML的SVG知识总结_叨唠的博客-CSDN博客_svg xml 是一个图片，既然是XML里面的图片标签，那么则可以往XXE注入里面想想，但是SVG不知道怎么构造浅谈SVG的两个黑魔法 - 知乎 我们可以利用text标签来显现文字，将文字改为引用我们的恶意代码即可 <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE test [ &lt...
[前端] SVG简单分析
网站前端/PHP/Android/其他
05-08 1890
百度地图上有很多标注点(小图标)，有大有小，如果开发自己的项目可能需要把这就默认标注点换成自己的，这就涉及到用图片还是用svg亦或是canvas，那我们想的是用svg来画这么一个图标出来，可能是svg的兼容性比较好吧。 废话不多说，先看效果 这里是通过js把画好的svg动态添加到div容器里  css: .box { width: 500px; height:
svg转base64
08-22
要将SVG转换为Base64格式，可以使用代码或在线工具来完成。一种方法是在代码中使用data URI scheme，将SVG代码直接嵌入到CSS样式中。可以使用以下格式将SVG转换为Base64： ```css background-image: url("data:image/svg+xml;base64,[Base64编码]"); ``` 其中，[Base64编码]是SVG代码经过Base64编码后的字符串。 另一种方法是使用在线工具进行转换。你可以复制SVG代码，并使用在线Base64编码工具将其转换为Base64格式。一些常用的在线工具包括： - [base64.guru](https://www.base64.guru/converter/encode/image/svg) - [FreeFormatter](https://www.freeformatter.com/base64-encoder.html) - [Online Base64 Image Encoder](https://www.askapache.com/online-tools/base64-image-converter/) 在这些工具中，你只需要将SVG代码粘贴到指定的输入框中，然后点击转换按钮，即可获得转换后的Base64编码。请注意，不同工具的界面和操作可能会有所不同，但基本原理是一样的。 请根据你的具体需求选择适合的方法来将SVG转换为Base64格式。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [svg64:在Node和浏览器中将SVG转换为base64](https://download.csdn.net/download/weixin_42114041/18257082)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [微信小程序 icon图标 SVG代码转码为Base64编码格式并使用（霸霸看了都说好）](https://blog.csdn.net/pujun1201/article/details/119756993)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值