小游戏和GUI编程(5) | SVG图像格式简介

小游戏和GUI编程(5) | SVG图像格式简介

0. 问题

  • Q1: SVG 是什么的缩写？
  • Q2: SVG 是一种图像格式吗？
  • Q3: SVG 相对于其他图像格式的优点和缺点是什么？
  • Q4: 哪些工具可以查看 SVG 图像？
  • Q5: SVG 图像格式的规范是怎样的？
  • Q6: 通过写代码的方式，制作 SVG 图像?
  • Q7: 高效制作 SVG 图像， 有哪些辅助工具可以使用？
  • Q8: 怎样在 SFML 中加载 SVG 图像并显示?
  • Q9: SVG 图像怎样转为 jpg/png 图像？

1. SVG 是什么的缩写？

A1: SVG 是 Scalable Vector Graphics 的缩写。

2. SVG 是一种图像格式吗？

.svg 文件是一个 XML 语言代码文件， 是一个图像。

矢量格式将图像存储为一组点和点之间的线。数学公式决定了这些点和线的位置和形状，并在放大或缩小图像时保持它们的空间关系。

例如如下代码保存为 test.svg, 默认被浏览器打开图像并查看:

<svg version="1.1"baseProfile="full"width="300" height="200"xmlns="http://www.w3.org/2000/svg"><rect width="100%" height="100%" stroke="red" stroke-width="4" fill="yellow" /><circle cx="150" cy="100" r="80" fill="green" /><text x="150" y="115" font-size="16" text-anchor="middle" fill="white">RUNOOB SVG TEST</text></svg>

在这里插入图片描述

3. SVG 相对于其他图像格式的优点和缺点是什么？

SVG 相比于其他图像格式的优缺点：

优点：

  • 编辑方便， 各种文本编辑器就可以编辑
  • 文件较小， 毕竟是文本
  • 清晰度不会随着放大缩小而影响

4. 哪些工具可以查看 SVG 图像？

哪些工具可以查看 SVG 图像？

  • Edge 浏览器
  • VSCode 默认不能查看， 安装 SVG 扩展后可以预览
  • Beyond Compare: 会默认按照图像方式显示
  • KolourPaint: 会默认按照图像方式显示
  • PyCharm: 会同时显示 svg 文件的代码内容和图像内容
    在这里插入图片描述

5. SVG 图像格式的规范是怎样的？

SVG 图像格式的规范:

  • 以 <svg> 元素开始， 以 </svg> 结束。
  • 支持预定义的形状元素: <rect>, <circle>, <ellipse>, <line>, <poliline>, <ploygon>, <path>
  • 通过对每一种形状 tag 的属性进行设置， 来得到不同的效果, e.g.
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150"style="fill:red;stroke:black;stroke-width:5;opacity:0.5"/>
  • 支持滤镜
  • 支持渐变

6. 通过写代码的方式，制作 SVG 图像?

通过写代码的方式，制作 SVG 图像

已经提到过了，就是 xml 代码， 只不过 tag 以及对应的属性， 是特殊的一小撮。

7. 高效制作 SVG 图像， 有哪些辅助工具可以使用？

高效制作 SVG 图像， 有哪些辅助工具可以使用？

https://www.jyshare.com/more/svgeditor/

这个在线工具， 是用鼠标的交互方式， 让人选择形状进行组合。 然后可以查看 svg 的源代码， 也可以转为 png 等图像格式。

8. 怎样在 SFML 中加载 SVG 图像并显示?

高效制作 SVG 图像， 有哪些辅助工具可以使用？

对于通过写代码方式生成 svg 图像， 主要在于编辑后的预览。 VSCode 里搜索 svg 扩展后排名第一个的那个扩展就可以了。

请添加图片描述

对于使用鼠标交互式生成 svg 图像， 使用 InkScape.

9. SVG 图像怎样转为 jpg/png 图像？

SVG 图像怎样转为 jpg/png 图像？

VSCode 插件
VSCode 里的 SVG 插件在预览时， 最右边一个图标是导出为 png 图像。

cairosvg 命令行工具

pip install cairosvg
cairosvg test.svg -o test.png

inkscape

inkscape 是世界上最先进的交互式编辑 svg 的软件， 支持各个操作系统。 也可以查看 xml 代码:

在这里插入图片描述

在这里插入图片描述

10. 总结

svg 格式的详细规范没找到， 乍一看简单的例子， 都是 xml 代码， 比较简单现查现用也来得及。

最为非nodejs程序员， 同行用 VSCode 的 svg 扩展， 就可以编写 svg 代码变看效果了。

如果希望鼠标点一点，组合各种形状， 首推 inkscape 软件, 其次是一些在线工具如: https://www.jyshare.com/more/svgeditor/

References

  • https://www.runoob.com/svg/svg-intro.html
  • https://superuser.com/questions/134679/command-line-application-for-converting-svg-to-png-on-mac-os-x
  • https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Tools_for_SVG
  • https://inkscape.org/zh-hans/doc/tutorials/basic/tutorial-basic.html

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/255955.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

CPP项目：Boost搜索引擎

CPP项目：Boost搜索引擎

1.项目背景 对于Boost库来说&#xff0c;它是没有搜索功能的&#xff0c;所以我们可以实现一个Boost搜索引擎来实现一个简单的搜索功能&#xff0c;可以更快速的实现Boost库的查找&#xff0c;在这里&#xff0c;我们实现的是站内搜索&#xff0c;而不是全网搜索。 2.对于搜索…
阅读更多...
11.0 Zookeeper watcher 事件机制原理剖析

11.0 Zookeeper watcher 事件机制原理剖析

zookeeper 的 watcher 机制&#xff0c;可以分为四个过程&#xff1a; 客户端注册 watcher。服务端处理 watcher。服务端触发 watcher 事件。客户端回调 watcher。 其中客户端注册 watcher 有三种方式&#xff0c;调用客户端 API 可以分别通过 getData、exists、getChildren …
阅读更多...
ELAdmin 前端启动

ELAdmin 前端启动

开发工具 官方指导的是使用WebStorm&#xff0c;但是本人后端开发一枚&#xff0c;最终还是继续使用了 idea&#xff0c;主打一个能用就行。 idea正式版激活方式&#xff1a; 访问这个查找可用链接&#xff1a;https://3.jetbra.in/进入任意一个能用的里面&#xff0c;顶部提…
阅读更多...
kafka教程

kafka教程

Kafka 中&#xff0c;Producer采用push模型&#xff0c;而Consumer采用pull模型。 Topic Topic&#xff08;主题&#xff09;是消息的逻辑分类或通道。它是Kafka中用于组织和存储消息的基本单元。一个Topic可以被看作是一个消息发布的地方&#xff0c;生产者将消息发布到一个…
阅读更多...
Axios设置token到请求头的三种方式

Axios设置token到请求头的三种方式

1、为什么要携带token? 用户登录时&#xff0c;后端会返回一个token&#xff0c;并且保存到浏览器的localstorage中&#xff0c;可以根据localstorage中的token判断用户是否登录&#xff0c;登录后才有权限访问相关的页面&#xff0c;所以当发送请求时&#xff0c;都要携带to…
阅读更多...
ubuntu彻底卸载cuda 重新安装cuda

ubuntu彻底卸载cuda 重新安装cuda

sudo apt-get --purge remove "*cublas*" "*cufft*" "*curand*" \"*cusolver*" "*cusparse*" "*npp*" "*nvjpeg*" "cuda*" "nsight*" cuda10以上 cd /usr/local/cuda-xx.x/bin/ s…
阅读更多...
fast.ai 机器学习笔记（四）

fast.ai 机器学习笔记（四）

机器学习 1&#xff1a;第 11 课 原文&#xff1a;medium.com/hiromi_suenaga/machine-learning-1-lesson-11-7564c3c18bbb 译者&#xff1a;飞龙 协议&#xff1a;CC BY-NC-SA 4.0 来自机器学习课程的个人笔记。随着我继续复习课程以“真正”理解它&#xff0c;这些笔记将继续…
阅读更多...
idea自带的HttpClient使用

idea自带的HttpClient使用

1. 全局变量配置 {"local":{"baseUrl": "http://localhost:9001/"},"test": {"baseUrl": "http://localhost:9002/"} }2. 登录并将结果设置到全局变量 PostMapping("/login")public JSONObject login(H…
阅读更多...
华为机考入门python3--（9）牛客9-提取不重复的整数

华为机考入门python3--（9）牛客9-提取不重复的整数

分类&#xff1a;列表 知识点&#xff1a; 从右往左遍历每一个字符 my_str[::-1] 题目来自【牛客】 def reverse_unique(n): # 将输入的整数转换为字符串&#xff0c;这样可以从右向左遍历每一位 str_n str(n) # 创建一个空列表来保存不重复的数字 unique_digits []…
阅读更多...
【C++】STL之string 超详解

【C++】STL之string 超详解

目录 1.string概述 2.string使用 1.构造初始化 2.成员函数 1.迭代器 2.容量操作 1.size和length 返回字符串长度 2.resize 调整字符串大小 3.capacity 获得字符串容量 4.reserve 调整容量 5.clear 清除 6.empty 判空 3.string插入、追加 、拼接 1.运算…
阅读更多...
16 亚稳态原理和解决方案

16 亚稳态原理和解决方案

1. 亚稳态原理 亚稳态是指触发器无法在某个规定的时间段内到达一个可以确认的状态。在同步系统中&#xff0c;输入总是与时钟同步&#xff0c;因此寄存器的setup time和hold time是满足的&#xff0c;一般情况下是不会发生亚稳态情况的。在异步信号采集中&#xff0c;由于异步…
阅读更多...
寒假9-蓝桥杯训练

寒假9-蓝桥杯训练

//轨道炮 #include<iostream> using namespace std; #include<algorithm> int logs[100010]; int main() {int n;cin >> n;for (int i 1;i < n;i){cin >> logs[i];}sort(logs 1, logs n 1);int ans 1000000000;for (int i 2;i < n;i){if (…
阅读更多...
【数学建模】【2024年】【第40届】【MCM/ICM】【F题 减少非法野生动物贸易】【解题思路】

【数学建模】【2024年】【第40届】【MCM/ICM】【F题 减少非法野生动物贸易】【解题思路】

一、题目 &#xff08;一&#xff09; 赛题原文 2024 ICM Problem F: Reducing Illegal Wildlife Trade Illegal wildlife trade negatively impacts our environment and threatens global biodiversity. It is estimated to involve up to 26.5 billion US dollars per y…
阅读更多...
分布式系统架构介绍

分布式系统架构介绍

1、为什么需要分布式架构&#xff1f; 增大系统容量&#xff1a;单台系统的性能瓶颈&#xff0c;多台机器才能应对大规模的应用场景&#xff0c;所以就需要我们的应用支撑平台具备分布式架构。 加强系统的可用&#xff1a;为了满足业务的SLA要求&#xff0c;需要通过分布式架构…
阅读更多...
深度学习(13)--PyTorch搭建神经网络进行气温预测

深度学习(13)--PyTorch搭建神经网络进行气温预测

一.搭建神经网络进行气温预测流程详解 1.1.导入所需的工具包 import numpy as np # 矩阵计算 import pandas as pd # 数据读取 import matplotlib.pyplot as plt # 画图处理 import torch # 构建神经网络 import torch.optim as optim # 设置优化器 1.2.读取并处理数据…
阅读更多...
第五篇：MySQL常见数据类型

第五篇：MySQL常见数据类型

MySQL中的数据类型有很多&#xff0c;主要分为三类:数值类型、字符串类型、日期时间类型 三个表格都在此网盘中&#xff0c;需要者可移步自取&#xff0c;如果觉得有帮助希望点个赞~ MySQL常见数据类型表 数值类型 &#xff08;注&#xff1a;decimal类型举例&#xff0c;如1…
阅读更多...
DevOps：CI、CD、CB、CT、CD

DevOps：CI、CD、CB、CT、CD

目录 一、软件开发流程演化快速回顾 &#xff08;一&#xff09;瀑布模型 &#xff08;二&#xff09;原型模型 &#xff08;三&#xff09;螺旋模型 &#xff08;四&#xff09;增量模型 &#xff08;五&#xff09;敏捷开发 &#xff08;六&#xff09;DevOps 二、走…
阅读更多...
【开源】SpringBoot框架开发天沐瑜伽馆管理系统

【开源】SpringBoot框架开发天沐瑜伽馆管理系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 数据中心模块2.2 瑜伽课程模块2.3 课程预约模块2.4 系统公告模块2.5 课程评价模块2.6 瑜伽器械模块 三、系统设计3.1 实体类设计3.1.1 瑜伽课程3.1.2 瑜伽课程预约3.1.3 系统公告3.1.4 瑜伽课程评价 3.2 数据库设计3.2.…
阅读更多...
【Kubernetes】kubectl top pod 异常？

【Kubernetes】kubectl top pod 异常？

目录 前言一、表象二、解决方法1、导入镜像包2、编辑yaml文件3、解决问题 三、优化改造1.修改配置文件2.检查api-server服务是否正常3.测试验证 总结 前言 各位老铁大家好&#xff0c;好久不见&#xff0c;卑微涛目前从事kubernetes相关容器工作&#xff0c;感兴趣的小伙伴相互…
阅读更多...
【Kubernetes】在k8s1.24及以上版本基于containerd容器运行时测试pod从harbor拉取镜像

【Kubernetes】在k8s1.24及以上版本基于containerd容器运行时测试pod从harbor拉取镜像

基于containerd容器运行时测试pod从harbor拉取镜像 1、安装高版本containerd2、安装docker3、登录harbor上传镜像4、从harbor拉取镜像 1、安装高版本containerd 集群中各个节点都要操作 yum remove containerd.io -y yum install containerd.io-1.6.22* -y cd /etc/containe…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发