搜索 - 腾讯云开发者社区-腾讯云

文章/答案/技术大牛

发布

来自专栏马洪彪
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
来自专栏绿巨人专栏
在博客园的markdow编辑器中使用SVG
SVG SVG 意为可缩放矢量图形（Scalable Vector Graphics）。 SVG 使用 XML 格式定义图像。问题如果在博客园的markdow编辑器中直接使用SVG，由于保存时，markdown引擎会插入一些html标签，导致看不到图像。解决方案可以使用div标签或者table标签来解决这个问题。 spark_master [label="Spark Master", color=3] spark_slave1 [label="Spark Slave", color=4] spark_slave2 [label="Spark Slave", color=4] spark_slave3 [label="Spark Slave", color=4 /releases/svg-edit-2.8.1/svg-editor.html SVG Reference graphviz
2.6K40发布于 2018-05-16
来自专栏HTML5学堂
SVG - 创建SVG图片
SVG - 创建SVG图片 HTML5学堂：之前在绘图中使用到了SVG以及Canvas，因此决定最近将绘图类的知识和大家分享一下。从研究角度来说，SVG比Canvas要难很多。今天先来说说SVG的基本知识以及创建SVG的基本方法。 SVG的支持程度 IE8-以及Android 2.3默认浏览器是不支持SVG的对SVG的基本理解可以把SVG想象成类似于HTML的图形，可以与其他浏览器技术，如JavaScript、CSS、DOM无缝集合创建SVG图片方法1：使用外部引入SVG的方式 SVG是一个以.svg结尾的文本格式的文件，可以将这个文件以普通图片的方式嵌入到DOM当中。 <object data="XXX.svg" type="image/svg+xml" /> SVG文件的编辑 <svg version="1.1" baseProfile="full" xmlns="
5K80发布于 2018-03-12
来自专栏码客
SVG绘图-SVG.js
{ SVG } from '@svgdotjs/svg.js' 简单示例 <! = draw .circle(60) .move(0, 0) .fill("#ffe7f4") .stroke({ width: 1, color: " f883c9" }); // 矩形 var r1 = draw .rect(100, 60) .move(0, 70) .fill("#ffe7f4" 矩形 var r2 = draw .rect(100, 60) .radius(10) .move(110, 70) .fill("#ffe7f4" .move(330, 70) .fill("#ffe7f4") .stroke({ width: 1, color: "#f883c9" }); // 椭圆形
7.3K71编辑于 2021-12-05
来自专栏HTML5学堂
SVG - 基本的SVG属性
SVG - 基本的SVG属性 HTML5学堂：在前一篇文章当中，我们讲解了SVG的基本知识，并且为大家介绍了如何在html文件当中书写SVG代码。今天我们具体讲解SVG的基本属性，如何使用SVG完成线、圆等图形的绘制。
5.1K170发布于 2018-03-12
来自专栏踏浪的文章
SVG
SVG使用可以直接使用svg 可以使用img标签引用svg 可以在HTML中使用svg 可以作为背景图片使用SVG画图矩形 - rect元素 <rect x="10" y="10" width=" 意味着这个圆心是在包围盒的左上角1/4处，半径0.25意味着半径长是对象方形包围盒长的1/4，就像你们图中看到的那样。 from, to, by, values 上面4个属性是一个家族的，是最具哲理的一个家族。他们解决的是非常有哲理的问题：你从哪里来？要到哪里去？ from = “value“：动画的起始值。 calcMode属性支持4个值：discrete | linear | paced | spline. 中文意思分别是：“离散”|“线性”|“踏步”|“样条”。每个控制点使用4个浮点值表示：x1 y1 x2 y2. 只有模式是spline时候这个参数才有用，也是分号分隔，值范围0~1，总是比keyTimes少一个值。
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 stroke-width="1" fill="#FF5722" /> <rect width="200" height="80" y="80" x="100" style="fill:#4C98F7 该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 style="fill:#333333;">Hello World</text> 圆角矩形 <rect x="10" y="10" width="100" height="40" rx="4" viewBox="-1 -1 600 400"> <rect x="50" y="20" width="100" height="40" rx="4" transform=" height="600" viewBox="-1 -1 800 600"> <rect x="50" y="20" width="100" height="40" rx="4" onmousedown="selectElement(event)"/> <rect x="100" y="120" width="100" height="40" rx="4"
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. ': ['svgs/*.svg'], } } } }, In the output file, svg-defs.svg, each icon (whatever paths and "icon shape-codepen"> <use xlink:href="/images/svg-defs.svg#shape-codepen"></use> </svg> This does SVG wins this one.
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 意为可缩放矢量图形（Scalable Vector Graphics）个人认为现在svg可能有点过时了，svg的很多功能css3或者canvas都能做到很好的效果，但是刚刚研究了一下还是看到了一些很实在的写法优势： SVG 图像可通过文本编辑器来创建和修改 SVG 图像可被搜索、索引、脚本化或压缩 SVG 是可伸缩的 SVG 图像可在任何的分辨率下被高质量地打印 SVG 可在图像质量不下降的情况下被放大 SVG 4，一个五角星 <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <polygon points="100,10 40,180 190,60 I love SVG</textPath> </text></svg> ? invite_code=3o2gu4wiqq68k
2K20发布于 2018-09-12
来自专栏子曰五溪
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 在html 中常用的方法 1.使用元素来嵌入SVG图像 <img src=”http://www.w3school.com.cn/svg/rect1.svg” width=”300″ /> 2.将SVG图像作为背景图像嵌入 background: url(‘http://www.w3school.com.cn/svg/rect1.svg’) no-repeat; 3.使用svg元素 Opera 32+ svg sprites svg sprites类似于css sprites，将各个svg合并在一起。实践中我们可以把整块的svg放在head头部，因此可以在一处地方更新svg即可，而不是让svg的代码块散落在文档的各个地方。由于绘制路径的复杂性，建议使用 SVG 编辑器来创建复杂的图形。
3.1K90发布于 2018-01-22
来自专栏企鹅号快讯
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
来自专栏mySoul
SVG基础知识 Adobe Illustrator绘制SVG
SVG svg在线编辑器 https://editor.method.ac/ 多边形使用的是polygon标签该标签能创建含有不少于三个边的图形。 /svg> Lineto 该执行从画笔的起点到位置绘制一条直线 [3.png] <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100 [4.png] 文本 text元素依旧当做图片处理 [5.png] <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> -- svg 图形的命名空间 --> <svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http: 完美的ai和html的一次结合一个svg.js框架 http://svgjs.com/ 使用该svg.js框架可以快速的操纵svg
3.3K50发布于 2018-10-13

第 2 页第 3 页第 4 页第 5 页第 6 页第 7 页第 8 页第 9 页第 10 页第 11 页

点击加载更多

SVGEdit——SVG编辑器

Boxy SVG for Mac(矢量图编辑器)

Boxy SVG for Mac(矢量图编辑器)

Boxy SVG Mac(矢量图编辑器)3.88.0

Boxy SVG Mac(矢量图编辑器)3.89.0

SVGEdit：老牌开源 SVG 编辑器是如何架构的？

在博客园的markdow编辑器中使用SVG

SVG - 创建SVG图片

SVG绘图-SVG.js

SVG - 基本的SVG属性

SVG

SVG基础

SVG绘图

SVG字体比IconFont更好用(SVG Sprite)

Vue | 使用 SVG sprite loader 来引入 svg

SVG初识

Using SVG

SVG 使用

SVG之旅：SVG的图层和渲染顺序

SVG基础知识 Adobe Illustrator绘制SVG

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐