Web前端笔记-HTML加载SVG图片及简单修改

加载的用img标签，就可以了，就把他当成普通图片即可，如：

<img src="icon/cash-coin.svg" />

图片是这样的：

在前端的效果就这样了。

简直无法看清，修改下。打开svg，从中看到几个参数：

width为宽，height为高，fill为填充的颜色，

改成这样，同时图片也变了：

看看界面：

现在这个好看多了。

本笔记使用到的SVG为cash-coin.svg

<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="rgb(255,255,255)" class="bi bi-cash-coin" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M11 15a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm5-4a5 5 0 1 1-10 0 5 5 0 0 1 10 0z"/><path d="M9.438 11.944c.047.596.518 1.06 1.363 1.116v.44h.375v-.443c.875-.061 1.386-.529 1.386-1.207 0-.618-.39-.936-1.09-1.1l-.296-.07v-1.2c.376.043.614.248.671.532h.658c-.047-.575-.54-1.024-1.329-1.073V8.5h-.375v.45c-.747.073-1.255.522-1.255 1.158 0 .562.378.92 1.007 1.066l.248.061v1.272c-.384-.058-.639-.27-.696-.563h-.668zm1.36-1.354c-.369-.085-.569-.26-.569-.522 0-.294.216-.514.572-.578v1.1h-.003zm.432.746c.449.104.655.272.655.569 0 .339-.257.571-.709.614v-1.195l.054.012z"/><path d="M1 0a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h4.083c.058-.344.145-.678.258-1H3a2 2 0 0 0-2-2V3a2 2 0 0 0 2-2h10a2 2 0 0 0 2 2v3.528c.38.34.717.728 1 1.154V1a1 1 0 0 0-1-1H1z"/><path d="M9.998 5.083 10 5a2 2 0 1 0-3.132 1.65 5.982 5.982 0 0 1 3.13-1.567z"/>
</svg>

Web前端笔记-HTML加载SVG图片及简单修改相关推荐

Vue 加载 SVG 图片文件
Vue 加载 SVG 图片文件 /svg/icons.js export default {// LOGOlogo: require('./logo.svg'),logo_content: requi ...
前端笔记-webpack加载前端资源（图片，css等）
目录基本概念代码与实例基本概念通过在webpack.config.js这个文件中添加module rules进行如下代码: 这里分别是加载vue,以及css,和styl样式和图片 styl用于 ...
汇总:web前端优化网页加载速度
前言: 网页的加载流程:打开一个网页,会先拉取一个html页面,然后浏览器解析了这个html页面后,会根据页面的内容,去拉取javascript.css和图片文件,最终根据这些文件,将页面渲染出来.影 ...
前端笔记-echarts加载bmap地图
程序运行截图如下: 这里首先要申请个百度地图密钥使用下面的方式输入密钥,这里使用jsonp的方式源码如下: <html> <head> <title></ ...
前端笔记-echarts加载geo地图
效果如下所示: 源码如下: <html> <head><title>中国地图散点图</title><script src = "echa ...
qimage加载bmp图片_批量修改图片大小，我发现了最简单的方法！
点击上方蓝字关注我们批量调整图片大小的软件很多很多,但很多时候我仅仅对图片做些小修改,而不需要那么多强大的功能,要的是实用,而不是有多华丽,然后运行速度快,也是我们所追求的,不要批处理图片的时候 ...
vue动态加载SVG文件并修改节点数据
先上一个马赛克图片叭. 接领导需求,动态实现电路图, 并附带放大.缩小功能. 以及不同的回路点击能弹窗显示相关节点的更多信息, 通俗一点讲: 随着用户点击放大和缩小, 点击位置保持不变,而且能实现点击 ...
Vue中动态加载SVG文件并绑定事件、修改节点数据
大致的流程是这样的:实现这个需求是首先通过一个工具(drawio)去自定义绘制图形,然后导出一个svg格式的文件,后端搞了一下drawio工具的源码,在导出的时候,为绘制的图形上每个节点都去绑定了一个 ...
android中读取svg文件,Android如何加载SVG格式的矢量图
为何要加载SVG图片相对于.JPG和.PNG甚至.webp的图片来说,SVG的图片有两个优点,第一:省空间,APK瘦身有一个方面就是从图片瘦身,使用SVG图片可以大量减轻程序的大小.第二:省时间,切 ...

Web前端笔记-HTML加载SVG图片及简单修改

Web前端笔记-HTML加载SVG图片及简单修改相关推荐

最新文章

热门文章