SVG - Software / Utility

About

List of library 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

  • https://github.com/svg/svgo - 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 result. GUI: https://jakearchibald.github.io/svgomg/

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

Vectorizer: From Raster image to Svg

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

See also the Online version


Powered by ComboStrap