欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

svg如何使用

程序员文章站 2022-03-12 21:29:21
首先说一下svg的优势:SVG 意为可缩放矢量图形(Scalable Vector Graphics)SVG 使用 XML 格式定义图像svg 与 jpeg 和 gif 图像比起来,尺寸更小,且可压缩性更强。svg 是可伸缩的svg 图像可在任何的分辨率下被高质量地打印svg 可在图像质量不下降的情况下被放大svg 图像中的文本是可选的,同时也是可搜索的(很适合制作地图)svg 可以与 java 技术一起运行svg 是开放的标准svg 文件是纯粹的 xml如何使用?svg教程 htt...

首先说一下svg的优势:

SVG 意为可缩放矢量图形(Scalable Vector Graphics)
SVG 使用 XML 格式定义图像

svg 与 jpeg 和 gif 图像比起来,尺寸更小,且可压缩性更强。
svg 是可伸缩的
svg 图像可在任何的分辨率下被高质量地打印
svg 可在图像质量不下降的情况下被放大
svg 图像中的文本是可选的,同时也是可搜索的(很适合制作地图)
svg 可以与 java 技术一起运行
svg 是开放的标准
svg 文件是纯粹的 xml

如何使用?

svg教程 https://www.runoob.com/svg/svg-tutorial.html

为毛我这里直接上链接了为什么还要写这篇文章,因为咱还是嫌弃他麻烦,什么圆形,矩形,直线,斜线啥的好麻烦(关键还需要自己写代码 嘘!) 我这里直接使用svg工具在线去生成svg代码

上链接:http://www.zuohaotu.com/svg/ svg在线编译器

使用
svg如何使用
首先随便画点东西在这~

然后点击视图最后一个源文件

svg如何使用
点击过后就会生成svg代码
svg如何使用
咱这边新建一个html文件把他复制进去

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <svg width="1276" height="634" xmlns="http://www.w3.org/2000/svg">
        <!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ -->
        <g>
         <title>background</title>
         <rect fill="#fff" id="canvas_background" height="636" width="1278" y="-1" x="-1"/>
        </g>
        <g>
         <title>Layer 1</title>
         <line stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_1" y2="44.05" x2="175.5" y1="44.05" x1="23.5" stroke-width="1.5" stroke="#000" fill="none"/>
         <line stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_2" y2="106.05" x2="100.5" y1="10.05" x1="102.5" stroke-width="1.5" stroke="#000" fill="none"/>
        </g>
       </svg>
</body>

</html>

浏览器运行
svg如何使用
和咱们画的一模一样

这里咱们检查代码
svg如何使用
还是有些用不到的代码存在 为了方便咱们更好的使用接下来改下他生成的svg代码

首先先把这些无用代码删掉

svg如何使用

接下来介绍一个line

svg如何使用
如何更改咱们画出来的元素

line里面有stroke属性直接修改即可

<line stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_1" y2="44.05" x2="175.5" y1="44.05" x1="23.5" stroke-width="1.5" stroke="red" fill="none"/>
<line stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_2" y2="106.05" x2="100.5" y1="10.05" x1="102.5" stroke-width="1.5" stroke="#000" fill="none"/>

svg的宽高可直接修改

svg如何使用

修改完代码如下~

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <svg width="1276" height="634" xmlns="http://www.w3.org/2000/svg">
        <g>
         <line stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_1" y2="44.05" x2="175.5" y1="44.05" x1="23.5" stroke-width="1.5" stroke="red" fill="none"/>
         <line stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_2" y2="106.05" x2="100.5" y1="10.05" x1="102.5" stroke-width="1.5" stroke="#000" fill="none"/>
        </g>
    </svg>
</body>

</html>

本文地址:https://blog.csdn.net/sslcsq/article/details/112537590

相关标签: svg