List of SVG Editors / Software and Utility

Card Puncher Data Processing

About

This page lists editors, libraries or GUI software that can manipulate SVG.

Type

GUI

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

// 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

https://github.com/fontello/svgpath

Vectorizer: From Raster image to Svg

To create a svg from a raster image, you can use potrace.

See also the Online version





Discover More
HTML - How to render SVG in HTML

How to render svg markup in a HTML page. You can render SVG markup via: object, embed, iframe, img, CSS background-image and svg inclusion. HTML A svgSVG element represents the root...



Share this page:
Follow us:
Task Runner