Svg Optimization included

Page Speed Performance


Svg Optimization is the reduction of the svg file size by deleting unneeded information without losing any quality.


We are following a subset of the SvgO optimization rules.

The implemented rules are:

  • Remove comments
  • Remove metadata
  • clean ID's
  • Remove empty elements
  • Remove editors and empty namespace
  • Remove title
  • Remove desc
  • Remove Style element and class attributes (You may disable it with the preserve attribute)
  • Remove Script element (no script injection)
  • Remove Attribute with default value (for instance version="1.1" or preserveAspectRatio="xMidYMid meet"
  • Remove width and height if they have the same value than the viewBox
  • Remove XML header such as
<?xml version="1.0" encoding="UTF-8"?>
  • Remove doctype such as:
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "">

You can disable and/or tune the optimizations with the help of the svg optimization configurations.

SVG Optimization GUI

If you want to see the effect or optimized manually your SVG, you can go to the SVGOMG tool.




By default, the optimization are enabled. This configuration permits to disable this feature.

The below configuration permits to control how the optimization is peformed.


This configuration set the namespace prefix (not the http URI but the name) that should be kept separated by a comma.

By default, the optimization will delete all below editors and empty namespace.

The editors namespace automatically deleted are:


The attributes to delete on all nodes.

By default, we are deleting the id and style attributes.


The elements to delete on the whole SVG.

By default, we delete the following elements:

Showcase yourself and your brand

Get free news, tips, and tricks
to create a remarkable experience for your readers.

Recommended Pages
Cache Management

All the caches are explained in this page, from pages to images
How to define your data set with Sql

This page defines the sql that can be used to retrieve data from pages
SVG to fitViewport 1Viewport 2--------------- meet ---------------xMin*xMid*xMax*---------- meet ----------*YMin*YMid*YMax---------- slice ----------xMin*xMid*xMax*--------------- slice ---------------*YMin*YMid*YMax
How to use a SVG in ComboStrap

ComboStrap supports natively SVG and allows you to use them as image, illustration and background
Page Explorer List Name To Ui Region
Page-explorer: adding page navigation easily to your website

With the page-explorer component, you can add an explorer like panel that will list your pages in a list or collapsible tree fashion

Task Runner