Inline SVG Images
Inject SVG images into the markup to style icons, logos and illustrations with your global colors and animate them directly in your layouts.
SVG images are perfect for icons, logos and illustrations because they stay sharp at any size. In YOOtheme Pro, SVG images can be loaded inline, so they become part of the page markup and can be styled directly with CSS.
This makes it easy to adapt SVG images to your design without creating separate image files for every color variation. Once injected into the markup, SVGs can inherit the current text color and follow the global style. On inverted backgrounds, these colors adapt as well, so the same SVG works across light, dark and colorful areas. If you change the style in the Style Customizer, all SVG images update accordingly, keeping icons, logos and illustrations consistent across your website.
Because inline SVG images are part of the markup, they can also be animated. Add stroke animations with just a click to draw icons and illustrations into view as they enter the viewport. For more advanced effects, use UIkit scroll animations in your SVG markup to move, rotate, scale or shift individual SVG elements independently and create dynamic illustrations that respond as users scroll through the page.
