将安卓XML图标转换成SVG图片

这篇具有很好参考价值的文章主要介绍了将安卓XML图标转换成SVG图片。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

将安卓XML图标转换成SVG图片

首先要明确的是,安卓XML格式的图标其实是XML矢量图片,与SVG图片及其类似,同根同源。

介绍SVG

缩放矢量图形(英语:Scalable Vector Graphics,即SVG)是一种基于可扩展标记语言XML,用于描述二维矢量图形的图形格式。

.svg格式相对于.jpg、.png甚至.webp具有较多优势:

  • 图像与分辨率无关,不会变形,适配安卓的各种分辨率;

  • 省空间。体积小,一般复杂图像也能在100KB内搞定,图标更不在话下。

转换方法

手动转换

  1. 将头部的:
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"

替换成

<svg xmlns="http://www.w3.org/2000/svg"

闭标签也做相应修改。

  1. android:width替换成width

  2. android:height替换成height

  3. android:pathData替换成d

  4. android:fillColor替换成fill

如果没有android:fillcolor的话,要加上fill="#ffffff"

  1. android:viewportHeight="24" android:viewportWidth="24"替换成viewBox="0 0 24 24"的形式。

自动转换

显而易见,手动转换及其的费时费力,且易出差错。

我将带来我个人开发的全自动图标转换器:Image Convert

目前项目稳定运行,服务器开销不小,大家多多支持。文章来源地址https://www.toymoban.com/news/detail-834528.html

到了这里,关于将安卓XML图标转换成SVG图片的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • css 实现svg动态图标效果

    效果演示:  实现思路:主要是通过css的stroke相关属性来设置实现的。

    2024年02月12日
    浏览(38)
  • WPF使用SharpVectors显示SVG图标

    W3C SVG Working Group SVG它的英文全称为Scalable Vector Graphics,意思为可缩放的矢量图形。 矢量图形,不受像素影响——SVG的这个特性使得它在不同的平台或者媒体下表现良好,无论屏幕分辨率如何,适合WPF使用。 iconfont-阿里巴巴矢量图标库提供了大量的SVG图标。 但是WPF本身不支持

    2024年02月13日
    浏览(46)
  • 在小程序中如何使用svg图标

    1.首先找到一个能够下载svg图标的网站,例如iconfont或iconpark。  2.选择好点击批量下载,下载一个压缩包。将下载后的压缩包解压之后就是我们选择下载的svg文件。如下图  3. 打开将svg文件转成base64的网站 ,因为在小程序中不能直接使用svg文件,得将其转成base64格式得数据作

    2024年02月12日
    浏览(62)
  • Vue3中使用svg图标

    因为项目很多模块需要使用图标,因此把它封装为全局组件!!! 在src/components目录下创建一个SvgIcon组件:代表如下 在src文件夹目录下创建一个index.ts文件:用于注册components文件夹内部全部全局组件!!! 在入口文件引入src/index.ts文件,通过app.use方法安装自定义插件

    2024年02月05日
    浏览(42)
  • windows系统本地批量预览svg图标

            目前前端使用图标大致分为两类: iconfont方式:通过引入在线或者下载到本地的iconfont.css类文件实现显示图标 第二类是封装图标组件,通过传入指定的svg名称快速生成图标         目前第二种是比较方便的,不需要频繁替换类文件,只需要下载svg到指定文件夹即可

    2023年04月21日
    浏览(44)
  • 【vue3+vite】使用vite-plugin-svg-icons插件显示本地svg图标

    使用vite-plugin-svg-icons插件显示本地svg图标 1.安装vite-plugin-svg-icons插件 2.使用vite-plugin-svg-icons插件 2.1 在项目根目录查找vite.config.js,进行配置 2.2 vite-plugin-svg-icons插件引入在main.js中 2.3 svg图标放入对应路径~~~~~图标路径与iconDirs设置得路径一致 项目中使用示例: //menu.icon是路径里面

    2024年02月12日
    浏览(44)
  • svg矢量图标在wpf中的使用

    在wpf应用程序开发中,为支持图标的矢量缩放,及在不同分辨率下界面中图标元素的矢量无损缩放,所以常常用到svg图标,那么如果完 美的将svg图标运用到wpf日常的项目开发中呢,这里分享一下我的个人使用经验和详细步骤。 1、SvgToXaml 工具 我经常使用一款开源的svg转xaml的

    2024年01月21日
    浏览(63)
  • 微信小程序里使用SVG矢量图标方法

    微信小程序里使用SVG矢量图标有2种引入方法: 一、SVG图标转换为BASE64编码 可以在百度搜索’svg在线转BASE64’(可能会有问题,如下) 如下方式 同时还需要添加 background-size: contain 属性使图标能根据元素大小自动缩放 二、使用运程地址引入SVG图标 把SVG图标上传到网站服务器

    2024年02月05日
    浏览(54)
  • 小白详解Vue3项目中怎么引入 SVG 图标

    今天一淘模板给大家来详解Vue3项目中怎么引入 SVG 图标具体流程 SVG 图标 既然是页面,肯定离不开一些图标 icon ,所以肯定要去最全的 阿里图标库 来寻找 这里讲解下如何将 阿里图标库 里面的东西,放到我们的页面上 阿里图标库 进入页面,找到 资源管理 下面的 我的

    2024年02月09日
    浏览(43)
  • vue中写svg组件svg图片加载不出来

    结构 首先要安装3个插件:svg-sprite-loader,svgo,svgo-loader package.json src/icons/index.js src/components/SvgIcon/index.vue main.js vue.config.js

    2024年02月15日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包