- 综合排序
- 最热优先
- 最新优先
- 来自专栏马洪彪
SVGEdit——SVG编辑器
BV13a411R7q5 demo示例： https://svgedit.netlify.app/editor/index.html 简介 SVGEdit 是一个快速的，基于Web的，JS实现的，SVG 画图编辑器，可工作于任何现代浏览器。 SVGEdit基于强大的SVG画布库@svgedit/svgcanvas。 当前版本为V7.
3.5K40编辑于 2022-09-26 - 来自专栏Mac软件
Boxy SVG for Mac(矢量图编辑器)
Boxy SVG mac版是Macos上一款矢量图编辑器，支持通用的 SVG 和 SVGZ 格式，支持超过 100 个快捷组合键，能够让你制作出各种各样的矢量图。 id=MjU2NjEmXyYyNy4xODYuMTI0LjQ%3D功能介绍清晰直观的用户界面***受Inkscape，Sketch和Adobe Illustrator的启发广泛支持画布上编辑对象几何，变换 ，绘画和其他属***保存为SVG和SVGZ格式，导出为PNG，JPG，WebP，PDF和HTML5打开剪贴画库与数千种免费股票矢量艺术的整合拥有超过一百万张免费图片的图片集成Google Fonts与数百种免费字体的集成超过
87420编辑于 2022-08-08 - 来自专栏mac软件推荐
Boxy SVG for Mac(矢量图编辑器)
Boxy SVG拥有100+的可配置键盘快捷键，让客户轻松设计出各种矢量图，boxy svg广泛支持画布上编辑对象几何，转换，绘画和其他属性，初学者以及专业人士都可以轻松上手，让编辑矢量图不再困难！ Boxy SVG for Mac(矢量图编辑器)1、免费无广告，隐藏的费用，应用内购买或注册形式。2、通用：创建横幅、按钮、图标、模型、图表、精灵和更多。 3、操作：打开和保存文件，svgz、SVG文件。导出的JPEG和PNG文件。4、自定义：超过100自定义键盘快捷键的命令。
1.1K30编辑于 2022-10-30 - 来自专栏Mac应用教程
Boxy SVG Mac(矢量图编辑器)3.88.0
Boxy SVG mac版是一款Mac平台上的矢量图编辑器，Boxy SVG Mac下载支持通用的 SVG 和 SVGZ 格式，支持超过 100 个快捷组合键，能够让你制作出各种各样的矢量图。 Boxy SVG Mac图片Boxy SVG mac功能介绍清晰直观的用户界面***受Inkscape，Sketch和Adobe Illustrator的启发广泛支持画布上编辑对象几何，变换，绘画和其他属 ***保存为SVG和SVGZ格式，导出为PNG，JPG，WebP，PDF和HTML5打开剪贴画库与数千种免费股票矢量艺术的整合拥有超过一百万张免费图片的图片集成
63610编辑于 2022-08-08 - 来自专栏Mac资源分享
Boxy SVG Mac(矢量图编辑器)3.89.0
Boxy SVG mac版是一款Mac平台上的矢量图编辑器，Boxy SVG Mac下载支持通用的 SVG 和 SVGZ 格式，支持超过 100 个快捷组合键，能够让你制作出各种各样的矢量图。 图片Boxy SVG mac功能介绍清晰直观的用户界面***受Inkscape，Sketch和Adobe Illustrator的启发广泛支持画布上编辑对象几何，变换，绘画和其他属***保存为SVG和SVGZ
80520编辑于 2022-08-22 - 来自专栏前端西瓜哥的前端文章
SVGEdit：老牌开源 SVG 编辑器是如何架构的？
SVGEdit 一款非常老牌的 SVG 图形编辑器，用于编辑处理 SVG，star 数目前是 5.8k。 它的优点在于经过多年的开发，完成度高，较为成熟，功能相当丰富。 作为一款 SVG 编辑器，选择 SVG 没有毛病，这样渲染效果就完全交给浏览器，不需要根据标准去实现渲染效果，自己专心写编辑器的业务逻辑即可。 渲染方案 渲染方案是 SVG。 SVG 编辑器用 SVG，相当合理。 对于图形树的实现、图形拾取（点选）、图形渲染，SVGEdit 都交给浏览器都去实现。 比如你要在图形编辑器里加一个新的模块，比如倒计时、一个表单组件，网上找到轮子集成进去会很方便。因为 SVG 里面可以嵌入 DOM 元素，DOM 元素里也可以嵌入 SVG。 但如果你要做 SVG 编辑器，与其从零开始，不如基于 SVGEdit 做去二次开发。 我是前端西瓜哥，关注我，学习更多图形编辑器知识。
1.4K30编辑于 2023-10-22 - 来自专栏林德熙的博客
win10 uwp 显示SVG win2d 使用 svg
DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg ="2" stroke-miterlimit="10" x1="11" y1="11" x2="16" y2="16"/> </g> </svg> 我们开始使用Image，但是没有显示 于是网上有一个库 安装Mntone.SvgForXaml，安装win2d 1.11.0 我们上面那个代码就是svg，我们使用ViewModel绑定，绑定内容是SvgDocument 自然我们需要写一个字符串去转换 x2=""16"" y2=""16""/> </g> </svg> "; Svg=SvgDocument.Parse(str); } 然后我们在我们的界面 /UWP/tree/master/uwp/src/ScalableVectorGraphic win2d 使用 svg 现在 win2d 支持 svg 1.1 ，直接在 win2d 使用svg请看下面代码
1.6K10发布于 2018-09-18 - 来自专栏绿巨人专栏
在博客园的markdow编辑器中使用SVG
SVG SVG 意为可缩放矢量图形（Scalable Vector Graphics）。 SVG 使用 XML 格式定义图像。 问题 如果在博客园的markdow编辑器中直接使用SVG，由于保存时，markdown引擎会插入一些html标签，导致看不到图像。 解决方案 可以使用div标签或者table标签来解决这个问题。 akka_client [label="AKKA Client", color=1] akka_server [label="AKKA Server (Spark)", color=2] [label="Spark Master", color=3] spark_slave1 [label="Spark Slave", color=4] spark_slave2 akka_server -> spark_master -> spark_slave1 [dir=both color=cadetblue] spark_master -> spark_slave2
2.6K40发布于 2018-05-16 - 来自专栏HTML5学堂
SVG - 创建SVG图片
SVG - 创建SVG图片 HTML5学堂：之前在绘图中使用到了SVG以及Canvas，因此决定最近将绘图类的知识和大家分享一下。从研究角度来说，SVG比Canvas要难很多。 今天先来说说SVG的基本知识以及创建SVG的基本方法。 2、与像素无关，可以放大或者缩小，甚至打印成任意大小，图片质量不会改变。 创建SVG图片 方法1：使用外部引入SVG的方式 SVG是一个以.svg结尾的文本格式的文件，可以将这个文件以普通图片的方式嵌入到DOM当中。 > 方法2 在HTML中直接使用SVG SVG - 示例demo <svg width="320" height="320" xmlns="http://www.w3.org/2000/svg"> <g
5K80发布于 2018-03-12 - 来自专栏码客
SVG绘图-SVG.js
前言 本文是在SVG.js 3.0的前提上，和2.x的API不一致。 { SVG } from '@svgdotjs/svg.js' 简单示例 <! () // 创建使用该方法 var draw = SVG() var draw = SVG().addTo('#drawing') // 这个方法只能获取不能创建 var rect = SVG('#myRectId move(0, 70) .fill("#ffe7f4") .stroke({ width: 1, color: "#f883c9" }); // 矩形 var r2 // 线 var line = draw .line(0, 0, 100, 60) .move(0, 410) .stroke({ width: 2,
7.3K71编辑于 2021-12-05 - 来自专栏HTML5学堂
SVG - 基本的SVG属性
SVG - 基本的SVG属性 HTML5学堂：在前一篇文章当中，我们讲解了SVG的基本知识，并且为大家介绍了如何在html文件当中书写SVG代码。 今天我们具体讲解SVG的基本属性，如何使用SVG完成线、圆等图形的绘制。 line - 直线 拥有四中基本属性 x1 属性在 x 轴定义线条的开始 y1 属性在 y 轴定义线条的开始 x2 属性在 x 轴定义线条的结束 y2 属性在 y 轴定义线条的结束 demo <line x1 = "20" y1 = "20" x2 = "200" y2 = "180" stroke = "black" stroke-width = "3"/> polyline - 折线 points
5.1K170发布于 2018-03-12 - 来自专栏踏浪的文章
SVG
直线 - line元素 <line x1="10" x2="50" y1="110" y2="150"/> 直线需要定义起点与终点即可： x1：起点x坐标。 y1：起点y坐标。 x2：终点x坐标。 y2：终点y坐标。 每个点必须有2个数字：x值和y值。所以下面3个点 (0,0), (1,1)和(2,2)可以写成：”0 0, 1 1, 2 2”。 每个点必须有2个数字：x值和y值。所以下面3个点 (0,0), (1,1)和(2,2)可以写成：”0 0, 1 1, 2 2”。 路径绘制完后闭合图形，所以最终的直线将从位置(2,2)连接到位置(0,0)。
6.9K40发布于 2019-07-31 - 来自专栏Czy‘s Blog
SVG基础
SVG基础 SVG可缩放矢量图形Scalable Vector Graphics是基于可扩展标记语言XML，用于描述二维矢量图形的一种图形格式。 DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg standalone="no"意味着SVG文档会引用一个外部文件，此处是DTD文件。 第2和第3行引用了这个外部的SVG DTD。 该DTD位于http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd，该DTD位于W3C，含有所有允许的svg元素。 svg代码以<svg>元素开始，包括开启标签<svg>和关闭标签</svg>，这是根元素，可以通过width和height属性可设置此SVG文档的宽度和高度，version属性可定义所使用的SVG版本，
3.3K20发布于 2020-08-27 - 来自专栏码客
SVG绘图
前言 图形 SVG <svg id="test_1" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width :1"> <rect x="10" y="10" width="100" height="40" rx="20"/> </g> </svg> SVG中 width/height 是图形的宽 内部元素的定位也是相对于svg的。 > <body> <svg xmlns="http://www.w3.org/2000/svg" id="m_svg" xml:space="preserve = document.getElementById("m_svg"); m_svg.setAttributeNS(null, "onmousemove", "moveElement(evt
2.8K30编辑于 2021-12-05 - 来自专栏杰的记事本
SVG字体比IconFont更好用(SVG Sprite)
DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg Just call it svg-defs.svg or something. -- all the paths and shapes and whatnot for this icon --> <g> <g id="shape-icon-<em>2</em>"> <! You’d think you could do: svg.shape-version-2 .targetting-a-path { fill: red; } But that doesn’t work Ideally you’d use the “hat” selector to break that: svg.shape-version-2 ^ .targetting-a-path { fill
3.7K60发布于 2019-09-04 - 来自专栏Zkeq
Vue | 使用 SVG sprite loader 来引入 svg
但是我们现在在用的是 Vue 官方的代码是这样的 // webpack >= 2 { test: /\.svg$/, loader: 'svg-sprite-loader', options : { ... } } // webpack >= 2 multiple loaders { test: /\.svg$/, use: [ { loader: 'svg-sprite-loader ('svg').exclude.add(dir) // 其他 svg loader 排除 icons 目录 // config.module // .rule('svg-sprite (svg)(\?.*)? 而且每次都要写 <svg><use /></svg> 好麻烦，我们可不可以把它封装成一个组件呢？ 引入整个 svg 目录？
4K20编辑于 2022-09-20 - 来自专栏知道一点点
SVG初识
优势： SVG 图像可通过文本编辑器来创建和修改 SVG 图像可被搜索、索引、脚本化或压缩 SVG 是可伸缩的 SVG 图像可在任何的分辨率下被高质量地打印 SVG 可在图像质量不下降的情况下被放大 SVG ://www.w3.org/2000/svg" version="1.1"> <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0 );stroke-width:2" /> </svg> 2，一个圆 <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx ="100" cy="50" r="40" stroke="black" stroke-width="<em>2</em>" fill="red" /> </svg> ? 50" style="fill:yellow;stroke:purple;stroke-width:2" /> </svg> ?
2K20发布于 2018-09-12 - 来自专栏柠檬先生
SVG 使用
/> 2.将SVG图像作为背景图像嵌入 background: url(‘http://www.w3school.com.cn/svg/rect1.svg’) no-repeat; 3.使用svg元素 线<line> <line x1=”0″ y1=”0″ x2=”300″ y2=”300″ style=”stroke:rgb(99,99,99);stroke-width:2″/> 解释：(x1,y1 )为线条的开始坐标；(x2,y2)为线条的结束坐标。 由于绘制路径的复杂性，建议使用 SVG 编辑器来创建复杂的图形。 curveto C三次贝塞尔曲线 C x1 y1, x2 y2, x y (or c dx1 dy1, dx2 dy2, dx dy) S光滑三次贝塞尔曲线 S x2 y2, x y (or s dx2
3.1K90发布于 2018-01-22 - 来自专栏子曰五溪
Using SVG
的时候，就会打开文本编辑器，显示SVG的编码。 ? 在
标签里面使用SVG 如果把SVG保存成文件之后，可以直接在
标签里面使用。 使用内联(inline)SVG 在保存SVG的时候可以获取SVG的代码（也可以直接在文本编辑器里面打开SVG文件），直接把SVG的代码复制到HTML里面： HTML <body> <! </svg> 在<object> SVG里使用外部样式 可以在SVG文件开头的<svg>标签前面引入： HTML <? -- base64 --> data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL... <! : 使用Fragment Identifiers更好地实现SVG Sprites simuari: SVG栈 SVG.js - "轻量的第三方库，可以操作SVG，还可以实现动画" Emmet：一种直接从文本编辑器里面生成
3K20发布于 2019-06-24 - 来自专栏企鹅号快讯
SVG之旅：SVG的图层和渲染顺序
其实在SVG中，他也有层和渲染顺序的概念。今天我们就来看看SVG中的图层和渲染顺序相关的知识。 SVG渲染顺序 从上面的代码中可以看出，在文本编辑器里编写SVG代码就可以绘制出所需要的图形。那么SVG中绘制过程有自己的基本原则： 解析顺序和绘制顺序一致，都要遵守XML中元素的位置排列。 绘制处理过程可以用下图简单的来描述： 不过在绘制SVG时，有一些细节需要注意： 解析SVG文档时，忽略DTD验证：虽然是 DTD 是 XML 解析的标准验证方式，但是很多工具制作的 SVG，DTD 会缺失 这种 SVG 的存在，一般是设计师通过 Photoshop 编辑图片后，再导入 Sketch 中生成的 SVG。 下一节，我们将学习SVG中的坐标系统。SVG的坐标系统相关的知识重要哟。
8.1K60发布于 2018-02-28
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号