About
Svg are supported natively as image
They are by default optimized.
If they have:
- a small size, they are included directly to the web page
- a big size, they are:
- and injected as markup
This features apply also to the following SVG:
Syntax
Svg is just an image and follows therefore the same syntax than a Image
{{[ ]svg_path?WxH&type=value&zoom=x&att=value[ ]}}
A svg accepts:
- a zoom attribute (used mostly to zoom out to create illustrative icon)
- and the special preserve attribute
You can change the svg type with one of the below type attribute.
| Type value | Default | Used as | Seen as |
|---|---|---|---|
| Yes | background cover and illustration | Illustrative Image | |
| icon | icon | Character (width = height and default to 24px) | |
| tile | background tile | Icon with a default dimension of 192px |
Example
Illustration
All svg are used by default as illustrative image that:
- takes all space available
- and are responsive
Below is an example of an illustrative image with a:
- width of 600px
{{ :combostrap:background:object-multicolor.svg?600&onHover=float&shadow=md |}}
Icon
If you don't have an icon in your library, the icon component is more suited but if you already have uploaded an icon, you can also use it with the svg syntax
Example of an svg icon with a:
{{:combostrap:icons:bs:emoji-wink.svg?30&type=icon&color=steelblue|Emoji wink}}
Features
Inclusion
If the SVG file has a size that is less or equal to the svgmaxinlinesize configuration, the SVG is directly included into the HTML document as markup Otherwise, it is added as a image.
This is a performance tradeoff configuration between the size of your web page and the cost of downloading your SVG file.
Lazy Loading
By default all big SVG file are lazy loaded meaning that they are downloaded only when they are going to be seen (enter into the screen).
If you don't want this feature, you can disable it in the configuration.
Injection
Big SVG file are downloaded and then injected as SVG markup. It's then possible to style them with CSS property.
If you don't want this feature, you can disable it in the configuration.
Optimization
Svg Optimization is the reduction of the file size by deleting unneeded information. You can know more about this subject on the dedicated page.
Security
Upload permission
By default, the SVG files cannot be uploaded because they can contain code. Only the admin user can upload an SVG by default.
If you want to allow users to upload an SVG, you need to put them in the designer group
Script deleted
By default, the script element is part of the elements to delete during the optimization, meaning that no script can be injected this way.
The on event attribute such as onClick are not.
Configuration
svgMaxInlineSize
The svgMaxInlineSize configuration is the maximum file size until a SVG file is included directly in the web page.
With a default of 2Kb, all small SVG file such as icon are automatically included. The browser does not need to download them.
svgLazyLoadEnable
By default, the SVG files that have a size bigger than the maximum inline size are lazy loaded.
This configuration permits to disable this feature.
svgInjectionEnable
If this configuration is on, the SVG files that have a size bigger than the maximum inline size are injected.
This configuration permits to disable / enable this feature.
svgPreserveAspectRatioDefault
If the preserveAspectRatio attribute is not set, it will be set with the default value.
This parameter drives how the SVG will fit in its container when the screen (viewport) is resizing.
The default value at installation time is: xMidYMid slice which means that:
- the svg image will be in the middle of X and Y
- and will be cropped.
Other options with the Svg Reference or at the mozilla knowledge base
Support
What to do if my SVG does not render correctly ?
If your svg does not render correctly, see this answer and solution document. Support - Why is my svg / icon not rendering correctly ?
Practice
We follow the Google Best Practice