ComboStrap UI - SVG

About

Svg are supported natively as image

They are by default optimized.

If they have:

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&att=value[ ]}}

A svg accepts all styling attributes.

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:

{{ :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 a SVG.

If you want to allow users to upload a SVG, you need to:

  • set the group that is allowed to upload a SVG in the svgUploadGroupName configuration.
  • add the user to this 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.

svgUploadGroupName

This configuration sets the group that is allowed to upload a SVG file.

SVG file can contain code and this by default not allowed to upload a SVG.

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

Reference

We follow the Google Best Practice

Powered by ComboStrap