最近做某个小项目，项目中用到了很多 icon 图标，我一般都是习惯于直接引用各大图标库，例如 fontawesome、Ionicons、MaterialCommunityIcons等。由于最近也在关注 SVG方面的东西，所以我突然想到有些很简单的图标，其实是可以通过 SVG绘制的，一般做这种的事情得工具应该是 Adobe Illustrator，但是因为电脑上只安装了 PS，也懒得再安装一个消耗那
转载
2024-07-27 15:43:38
84阅读
这篇文章给大家分享的内容是SVG动态图标是如何实现的，有需要的朋友可以参考一下。在 loading.io 上能看到好多效果惊艳的loading图标。它们都是用svg写成的，寥寥几行代码，比img图片更精细更节省体积，比纯dom实现要更灵活和高效。另外还可以让图标响应点击事件 。怎么画这些圆和方块？怎么着色？怎么动起来？ 先看看svg的基础知识，然后将上面第一个图标画出来。一、基本图形元素svg有一
转载
2024-05-01 10:34:45
108阅读
在使用之前建议下个PS或者FLASH玩玩里面的钢笔工具（FLASH里的钢笔工具比PS里的好用）PATH用到的指令：M----（X Y）：移动到Z----(none)：关闭路径L----（X Y）：画线到H----(X)：水平线到V----(Y)：垂直线到C----(X1 Y1 X2 Y2 X Y)：三次贝塞尔曲线S----(X1Y1 X Y)：光滑三次贝塞尔曲线到Q----(X1 Y1 X Y)：
转载
2024-06-26 18:28:31
38阅读
和 入门教程 SVG 即 Scalable Vector Graphics，是一种用来绘制矢量图的 HTML5 标签。你只需定义好XML属性，就能获得一致的图像元素。 使用SVG之前先将标签加入到HTML body中。就像其他的HTML标签一样，你可以为SVG标签为之添加ID属性。也可以为之添加css样式，例如“border-style:solid;border-width:2px;”
svgsvg: scalable vector graphics，可缩放的矢量图该图片使用代码书写而成缩放不会失真内容轻量SVG是一种XML语言，类似 XHTML，可以用来绘制矢量图形。SVG 可以通过定义必要的线和形状来创建一个图形，也可以修改已有的位图，或者将这两种方式结合起来创建图形。图形和其组成部分可以形变（be transformed）、合成、或者通过滤镜完全改变外观。1. 怎么使用sv
转载
2023-09-20 04:28:45
173阅读
一、Canvas
canvas是HTML5中新增一个HTML5标签与操作canvas的javascript API，它可以实现在网页中完成动态的2D与3D图像技术。<canvas> 标记和 SVG以及 VML 之间的一个重要的不同是，<canvas> 有一个基于 JavaScript 的绘图 API，而 SVG 和 VML 使用一个 XML 文档来描述绘图。SVG 绘图很容
转载
2023-07-14 23:12:25
119阅读
一、Svg简介svg也是html5新增的一个标签，它跟canvas很相似。都可以实现绘图、动画。但是svg绘制出来的都是矢量图，不像canvas是以像素为单位的，放大会模糊。svg绘制出来的图是不会的 二、svg的基本使用svg是在html和css里面操作的，不是在js里面<body>
<svg width="500" height="500"> <sv
转载
2023-11-23 14:50:10
261阅读
# 鸿蒙SVG路径介绍及代码示例
，也可
原创
2023-03-01 16:30:27
408阅读
SVG可以作为一个独立的文件存在。但更多的时候，我们希望他能集成在某个更大的文档中，比如HTML。将SVG插入到HTML中主要有以下3种方式：将SVG文件作为图片将SVG作为应用程序混合文档将SVG文件作为图片tagSVG本身作为一种图像格式，和其他图像一样通过指定tag的src属性即可。并且可以通过css指定图像的尺寸和位置。对于SVG图像来说，如果不指定图像()的尺寸，会按照以下情况进行显示：
转载
2023-11-07 06:57:03
66阅读
svg矢量文件体积小，不变形，比传统的png先进，比现在流行的icon-font灵活。然而在使用过程中还是遇到了很多坑。今天花了一天时间把经验整理出来，以供后来者借鉴。如果您从本文收益，请留言mark一下。这里我们要实现的功能是，一个svg文件包含多个图形，这样的好处是，网络请求次数少，加载快速。否则一个网页有10个图标就要请求10次。 一、制作svg1.用记事本新建一个mysvg.sv
转载
2023-07-19 21:00:02
263阅读
上一篇文章《HTML5 SVG简介》中，我们介绍了SVG的基本知识。在这篇文章中，我们将介绍在网页中使用SVG的各种方法，以及这些方法的浏览器持。通过标签这可能是最简单的使用SVG的方法，而且是开发者最熟悉的方法。SVG文件能够像位图一样通过标签在网页上使用。 上图是在标签中使用SVG文件的结果。注意，图像的大小也可以通过SVG文件来修改。同样可以像其它元素一样在SVG图像上使用CSS样式。菏泽医
转载
2023-12-18 16:39:07
181阅读
SVG 即 Scalable Vector Graphics，是一种用来绘制矢量图的 HTML5 标签。你只需定义好XML属性，就能获得一致的图像元素。 使用SVG之前先将标签加入到HTML body中。就像其他的HTML标签一样，你可以为SVG标签为之添加ID属性。也可以为之添加css样式，例如“border- style:solid;border-width:2px;”。SVG标签跟其它的H
转载
2023-07-19 20:59:28
88阅读
svg矢量文件体积小，不变形，比传统的png先进，比现在流行的icon-font灵活。然而在使用过程中还是遇到了很多坑。今天花了一天时间把经验整理出来，以供后来者借鉴。如果您从本文收益，请留言mark一下。这里我们要实现的功能是，一个svg文件包含多个图形，这样的好处是，网络请求次数少，加载快速。否则一个网页有10个图标就要请求10次。一、制作svg1.用记事本新建一个mysvg.svg , 里面
转载
2024-02-08 21:56:37
183阅读
<path> 元素用于定义一个路径。 一、命令下面的命令可用于路径数据：命令字母示意描述(小写表示相对于上个坐标的位移,相对路径)M(m) x ymoveto移动到(x,y)L(l) x ylineto画一条直线到(x,y)H(h) xhorizontal lineto水平画一条直线到 Xv(v) yvertical lineto竖直画一条直线到 yA(a) rx ry x-axis-
转载
2023-08-08 10:38:01
140阅读
<svg> 标签用于声明一个 SVG 文档片段，它内置许多标签帮助开发者绘制图形0、基本介绍SVG 是一种基于 XML 语法的图像格式，全称是可缩放矢量图（Scalable Vector Graphics）它的本质其实就是对图片进行描述的文本，因此无论我们将图片放大多少倍都不会失真使用 SVG 的方式有很多，以下是最常见的几种：将 SVG 代码直接插入 HTML将 SVG 代码保存为一
转载
2023-08-28 13:35:37
88阅读
Image Map Pro---破解版最先进的 SVG 地图生成器 多边形矢量形状、拖放编辑器、SVG 图标、自定义样式和动画。可用于 WordPress 或作为独立的 jQuery 插件。功能强大且易于使用的编辑器。Image Map Pro™ 自带功能丰富的 Web 应用程序，因此您可以快速轻松地创建最全面的交互式 SVG 图像映射、图钉和自定义矢量形状，并立即将它们导出到您的网站。多边形形状
转载
2024-08-24 18:59:08
70阅读
# 如何实现 Android SVG 路径动画
作为一名新手开发者，实现“Android SVG路径动画”可能会让你感到有些不知所措。本文将通过简单易懂的方式，引导你一步步完成这一目标。首先，我们将为整个流程制定一个清晰的步骤表格，然后详细介绍每一步要做的事情及所需的代码。
## 流程概述
| 步骤 | 描述 |
|------|------|
| 1 | 准备 SVG 文件 |
|
原创
2024-09-07 05:22:47
75阅读
# Python 提取 SVG 路径的解析与应用
SVG（Scalable Vector Graphics）是一种基于 XML 的矢量图形格式，可以在网页上呈现高质量的图像。常用的图形元素之一是路径（path），它由一系列的命令和参数组成，可以形成复杂的形状。在本文中，我们将介绍如何使用 Python 提取 SVG 文件中的路径数据，并提供代码示例，以帮助理解这一过程。我们还将通过可视化方式呈现
前面的话本文将详细介绍SVG路径path字符串路径(path)是一个非常强大的绘图工具，可以用path元素绘制矩形(直角矩形或者圆角矩形)、圆形、椭圆、折线形、多边形，以及一些其他的形状，例如贝塞尔曲线、2次曲线等曲线SVG路径最常用的属性是d属性，即path字符串，用来定义path元素的路径形状属性d的值是一个“命令+参数”的序列，每一个命令都用一个关键字母来表示。参数之间可以用空格或逗号隔开，
转载
2024-01-03 10:01:59
257阅读
