ComboStrap UI - SVG

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:
  • lazy loaded
  • and injected as markup

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:

• all styling attributes
• 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.

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
• hover animation
• shadow

{{ :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:

• type=icon that makes it behave as an icon
• size of 30
• and a steelblue color

{{: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