Optimize.svg

Copy your layers/frames into optimized svg code. Toggle on/off settings to dial in your optimization depending on your use case.

While in Dev Mode and the Inspect Panel is active: Select your frame/layer to generate optimized svg code for you to copy and paste inline within your code.

Optimize.svg leverages the power of svgo.js and its extensive plugin options. We have enabled a few by default to help optimize your code out of the box along with providing toggle options for others.

Dev Settings that can be toggled on/off:

Width of ViewboxUse Layer Names - Use your layers/frames names as IDs or Classes by toggling this optionRemove DoctypeRemove XMLNSMerge PathsInline StylesMerge StyleMinify StylesConvert Ellipse to CircleConvert Shape to PathSet by DefaultcleanupAttrs

cleanupEnableBackground

cleanupNumericValues

collapseGroups

convertColors

convertPathData

convertTransform

moveElemsAttrsToGroup

moveGroupAttrsToElems

removeComments

removeDesc

removeEmptyAttrs

removeEmptyContainers

removeEmptyText

removeHiddenElems

removeMetadata

removeNonInheritableGroupAttrs

removeTitle

removeUnknownsAndDefaults

removeUnusedNS

removeUselessDefs

removeUselessStrokeAndFill

removeXMLProcInst

sortAttrs

sortDefsChildren