About
This page lists editors, libraries or GUI software that can manipulate SVG.
Type
GUI
- Inkscape !
- From Svg to Code and vice versa: http://1023.io/p5-inspector/ (http://yining1023.github.io/p5PlayGround/)
Xslt
Svg is xml compliant, you can then use xslt
xsltproc --novalid stack.xslt demo-stack.svg > stacked-demo-stack.svg
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:svg="http://www.w3.org/2000/svg">
<xsl:template match="/svg:svg">
<xsl:copy>
<svg:style type="text/css">
<![CDATA[
.i {display:none;}
.i:target {display:block;}
]]>
</svg:style>
<xsl:apply-templates />
</xsl:copy>
</xsl:template>
<xsl:template match="/svg:svg/svg:g">
<svg:svg class="i">
<xsl:attribute name="id"><xsl:value-of select="@id" /></xsl:attribute>
<xsl:copy-of select="/svg:svg/@width" />
<xsl:copy-of select="/svg:svg/@height" />
<xsl:copy-of select="/svg:svg/@viewBox" />
<xsl:apply-templates select="@*|node()"/>
</svg:svg>
</xsl:template>
<xsl:template match="comment()" />
<xsl:template match="@*|node()">
<xsl:copy>
<xsl:apply-templates select="@*|*" />
</xsl:copy>
</xsl:template>
</xsl:stylesheet>
Library
Cleaner / Minify
SVG files, especially exported from various editors, usually contain a lot of redundant and useless information such as editor metadata, comments, hidden elements, default or non-optimal values, and other stuff that can be safely removed or converted without affecting SVG rendering results.
Injection
Manipulation
- https://xmlgraphics.apache.org/batik/ - With Batik, you can manipulate SVG documents anywhere Java is available.
// initialize SVG.js
var draw = SVG('drawing')
// draw pink square
draw.rect(100, 100).move(100, 50).fill('#f06')
<div id="drawing"></div>
SVG Path Transformation
Vectorizer: From Raster image to Svg
To create a svg from a raster image, you can use potrace.
See also the Online version