SVG 数据可视化


SVG是一种图形文件格式,它的英文全称为Scalable Vector Graphics,意思为可缩放的矢量图形。

它是基于XML(Extensible Markup Language),由World Wide Web Consortium(W3C)联盟进行开发的。严格来说应该是一种开放标准的矢量图形语言,可让你设计激动人心的、高分辨率的Web图形页面。用户可以直接用代码来描绘图像,可以用任何文字处理工具打开SVG图像,通过改变部分代码来使图像具有交互功能,并可以随时插入到HTML中通过浏览器来观看。


SVG 是一种用文字精确描述矢量图片的格式,后缀名.svg。


SVG 实例

该实例库(static/images/symbols.svg)共有 81 个图片,主要是用 path 标签绘制的。展示几个:

查看 svg 文件获取 symbol id,填到下面的 #id 即可预览: 
<svg> <use href="static/images/symbols.svg#icon-404"></use> </svg>

获取该.svg文件的所有id: 为减少重复,下文省略掉这些id的重复开头 "icon-"。
gitbash$ grep "id=\"" symbols.svg  | grep symbol > backup/tmp.txt
CMD> jupyter notebook

import re
fr=open("tmp.txt")
i=0
arr=[]
for lineR in fr.readlines():
    line=lineR.strip()
    i+=1
    if i>5:
        #break
        pass
    rs1 = re.split("id=\"icon-", line)
    rs2 = re.split("\">", rs1[1])
    arr.append(rs2[0])
fr.close()
print(len(arr)) #81
print(arr)

输出:
['404', 'DB', 'add', 'address', 'api', 'bug', 'business', 'chart', 'clipboard', 'code', 'code_example', 'component', 'dashboard', 'delete', 'dept', 'documentation', 'drag', 'edit', 'education', 'email', 'error', 'example', 'excel', 'exit-fullscreen', 'eye-open', 'eye', 'finish', 'form', 'fullscreen', 'icon', 'international', 'ip', 'language', 'leave', 'link', 'list', 'lock', 'log', 'login', 'login_log', 'map', 'menu', 'message', 'model', 'money', 'monitor', 'nested', 'notification', 'operation_log', 'password', 'pdf', 'people', 'peoples', 'permission', 'phone', 'qq', 'request', 'role', 'run', 'safety', 'search', 'server', 'shopping', 'size', 'skill', 'star', 'sys', 'tab', 'table', 'task', 'task_finish', 'theme', 'tools', 'tree-table', 'tree', 'user', 'wechat', 'workflow', 'workflow_case', 'workflow_list', 'zip']

参考资料

https://www.w3school.com.cn/svg/index.asp