SVG格式图片的放大

SVG是一种矢量格式图片，即可以无损放缩，其存储的是图像中每个元素的定义，如方块、椭圆等。越来越多的网站采用SVG格式来表达图表。但是SVG格式并不能像png、jpj那样直接拖拽防缩，但只要稍微修改源代码即可。
以笔者关注的叙利亚战争形势图为例（额。。竟然不支持svg格式的显示）。虽然是无损存储但拖拽窗口没法放大，细节根本看不清。
https://en.wikipedia.org/wiki/Syrian_Civil_War#/media/File:Syrian_Civil_War_map.svg

用vscode打开图片来看看源码。vscode是微软出的傻瓜式编辑器，可视化的安装各种插件，虽然可能还没有sublime或notepad++方便，但非常容易上手。

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) --><svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"xmlns:cc="http://creativecommons.org/ns#"xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"xmlns:svg="http://www.w3.org/2000/svg"xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"version="1.1"width="983.28534"height="812.71039"viewBox="0 0 921.83003 761.916"id="Syria_1_"xml:space="preserve"inkscape:version="0.91 r13725"sodipodi:docname="wewbadmnap3.svg"inkscape:export-filename="C:\Users\Christine\Downloads\Rumala.png"inkscape:export-xdpi="350"inkscape:export-ydpi="350"><sodipodi:namedview

这里只截取了代码的头部，当然我们所关注的也就是头部。svg段是主要的显示参数定义
width,height控制显示在屏幕的面积，改变会防缩图像、viewBox表示显示矢量相对坐标被显示在屏幕的范围
如果原图是长a，宽b的，则截取其中viewBox的部分，拉伸放在width,height所定义的屏幕区域中
一般来说只用修改width和height。只要简单粗暴的在width = “983.28534”
height = “812.71039”
的数值上前面加个1，变成width=”1983.28534”
height=”1812.71039”
就足够了，再用浏览器打开就可以看细节了，如果不够清晰还可以继续调数值。这里不用担心会变形，如果放大后和边框不匹配会自动留白的。

SVG格式图片的放大相关推荐

QT5开发及实例学习之十八显示Qt5 SVG格式图片
SVG 的英文全称是 Scalable Vector Graphics,即可缩放的矢量图形.它是由万维网络联盟 ( World Wide Web Consortium, W3C ) 在 2000 ...
Android使用svg格式图片，并改变图片颜色
1.在iconfont网站上下载svg格式图片,iconfont网站地址:iconfont-阿里巴巴矢量图标库,登录后下载 2.Android studio 在drawable文件夹右击,选择New- ...
cad转图片，cad图纸该如何转换成svg格式图片呢？
CAD转SVG格式图片非常实用方便,优点是可以让用户直接用代码来描绘图像,而且用任何文字处理工具都可以打开SVG图像.CAD制图工作中,我们需要把CAD转换成图片.cad图纸该如何转换成svg格 ...
element适配svg格式图片
SVG格式图片的配置名词解释: svg是可缩放矢量图形,顾名思义就是任意改变其大小也不会变形,基于可扩展标记语言(xml),他严格遵守XML语法,并用文本格式的描述性语言来描述图像内容.用户可以直接 ...
svg上传服务器无法显示,让WordPress支持上传SVG格式图片并显示在媒体库中的方法...
让WordPress支持上传SVG格式图片并显示在媒体库中的方法发布时间:2020-12-11 14:18:12 来源:亿速云阅读:167 作者:小新这篇文章将为大家详细讲解有关让WordPre ...
01.使用.svg格式图片生成app图标详细步骤和注意事项
Android8.0之后引入了矢量图标,可以支持动态特效,在不同安卓版本上可以相对应的显示圆形.方形圆角,方形图标需要两张.svg格式的图片,一张前景图,一张背景图,分别命名为ic_launcher ...
一键完成：批量转pdf图片为png、svg格式图片
记得以前使用texlive2020时,只要在standalone的选项里面使用convert选项,再加一些设置,就能自动生成高清png 格式的图片了. 自从升级为exlive2022后,才发现再也不能 ...
项目引入svg格式图片无效
react中引入svg格式图片无效解决办法 import LogoSvg from '../../../public/logo-ant.svg';<img src={LogoSvg} alt= ...
学习QT之显示SVG格式图片
SVG的英文全称是Scalable Vector Graphics,即可缩放的矢量图形.它是有万维网联盟在2000年8月制定的一种新的二维矢量图形格式,也是规范中的网格矢量图形标准,是一个开发的图形标 ...

SVG格式图片的放大

SVG格式图片的放大相关推荐

最新文章

热门文章