# svg2png

**Repository Path**: slcode/svg2png

## Basic Information

- **Project Name**: svg2png
- **Description**: svg转png多倍图的程序
- **Primary Language**: C++
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-05-12
- **Last Updated**: 2020-12-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


#### 缘由
使用阿里图标库时，有很多素材，而阿里限制一次只能下载20个，而且需要一个一个点击，要是几百个不累死了。

逻辑：
1. 通过js，快速选中多个图标
2. 下载、提取svg描述信息
3. 使用qt渲染并保存为png

#### 为什么使用png

* ttf的方式没有颜色，虽然可以设置，但是我觉得自己设置的不如默认的颜色好看
* svg增加渲染性能损失
* 所以还是传统的png倍图吧😄



#### 开始！
###### 第一步：在所在图标库界面运行下面代码（mac下alt+command+I）
  ```
    var list = document.getElementsByClassName("block-icon-list clearfix")[1].getElementsByTagName("li")
    for (var i = 0; i < list.length; ++i) {
        list[i].getElementsByClassName("icon-cover")[0].getElementsByTagName("span")[0].click()
 ```
 此时发现这些图标都被加入到了“购物车”

###### 第二步：添加至项目（需要注册登陆自己的阿里图标库账号），可以设置一个名称，点击后将跳转至该项目
  
  ###### 第三步：把项目下载至本地，会发现里面有一些html+css+ttf+svg等文件，svg是在iconfont.js中的。
  ###### 第四步：把iconfont.js拖到程序中，**设置子目录名**（你不想我随意的生成到你的用户目录下吧？），**设置你想要的素材尺寸**，**勾选你要的多倍图**，点击Run，完成！
 
PS： 这里可以支持多个以;分割的尺寸，但是文件名会被最后一个覆盖，如果您想生成多个，那么需要更改一下名称即可，比如加个size后缀 


#### 中间记录点
1. qt xml解析的时候，个别dom类型为21（BaseNode，不标准的Node），不知是什么原因，有的调还位置就可以，没有深究，使用正则表达式匹配下吧