Inject inline SVG images into the page markup and style them with CSS.

SVGs or Scalable Vector Graphics are really handy, for example to display a logo that remains crisp when scaling or that is animated. The SVG component provides more control to style and animate the image and its vector parts. It injects the image into the markup as an inline SVG including all attributes, like IDs, classes, width and height, so that they can easily be targeted using CSS.
Image

SVGs will adapt the current color for their stroke and fill color. To prevent this behavior, you can add the .uk-preserve class to the SVG itself or to elements inside the SVG.

Image
Image
Image
Image

Targets a symbol inside the SVG image

Image
Image
Image

Content Fields

Here is a list of common content fields for Team add-on.

Setting Description
Image An image field with an image picker.
Alt Text Insert Alt text, which is an important for SEO purposes and part of making a site accessible.
Width Set width for svg image
Height Set height for svg image
Preserve Color SVGs will adapt the current color for their stroke and fill color. To prevent this behavior, you can use this option to add css class to the SVG itself or to elements inside the SVG.
Use Link Check this option to insert the link for svg image

General Settings

General settings, which are the same across all add-ons, are grouped in a General section at the bottom. Here is a short overview.

Setting Description
Margin Keep the existing vertical margin (e.g. from headings), force specific margin or remove all margin. Margins of an element can be removed from the top and bottom.
Remove top margin. Use this option to remove the add-on's top margin
Remove bottom margin. Use this option to remove the add-on's bottom margin
Animation Overwrite the animation settings from the section. This won't have any effect unless animations are enabled for the add-on.
Alignment This option specifies the alignment of an add-on according to the surrounding element
Text Breakpoint Define the device width from which the alignment will apply.
Visibility Define when the add-on should be hidden.
CSS Class If you wish to style a particular content element differently, then use this field to add a class name and also refer to it in your css file.