How to use a SVG in ComboStrap

Undraw Add Content Re Vgqa

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

A svg accepts:

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 |}}

Object Multicolor

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

SVG to fitViewport 1Viewport 2--------------- meet ---------------xMin*xMid*xMax*---------- meet ----------*YMin*YMid*YMax---------- slice ----------xMin*xMid*xMax*--------------- slice ---------------*YMin*YMid*YMax

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




Showcase yourself and your brand

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




Related HowTo's
Undraw Animating
How to get a serie of images with the same dimension (Width and Height) ?

When rendering a serie of images, you may want them to have the same dimension (width and height) in order to get a consistent and peaceful visual. To achieve it, you need to use the combine the ratio...


Recommended Pages
Undraw My Documents
Background styling - Add any background to your ComboStrap component

The background element permits you to add any background to your ComboStrap component in an easy and declarative way.
Primary Secondary Color
Branding Colors (primary, secondary)

The branding colors are the most dominant colors of your theme. They bring a connection to your brand.
Icon Default Location Combostrap
ComboStrap - Icon Component

An icon component that makes it easy to add icon to your pages
ComboStrap Diagram

ComboStrap is able to create and render diagrams . Example with a sequence Diagram. If your diagrams are in a svg format, you can just render them with the svg component. Otherwise, you can use the...
Undraw My Documents
Designer

A designer is a person that has elevated privilege in order to be able to use HTML and Javascript. A designer may: inject HTML with the webcode upload svg To be a designer, the user should be...
Featured Image
Featured Image

A featured image is a page's main illustrative image. The featured image is generally located below or above the page tile. We support two types of featured images: raster that are suitable for...
How to define your data set with Sql

This page defines the sql that can be used to retrieve data from pages
Stock Image Surfer In The See
How to use the image tag in ComboStrap

Combostrap supports raster and vector images. This page shows you how to add an image with syntax and examples.
Page Speed Performance
Lazy loading in ComboStrap

ComboStrap loads all images by default in a lazy mode meaning that they are loaded only when they are going to enter the screen.
Undraw My Documents
Lightbox

A lightbox is a window that: appears when you click on a image showing the image in full format against a dark background (giving more contrast and therefore more light). If you click on this...



Task Runner