SVGs and Lottie Elements

SVGs

SVGs are great. They allow the creation of lightweight responsive UI without a loss of quality. We highly encourage using them for Eko projects to make them look good both on desktop and mobile.

Using Gradients and Masks

Important! The following is only relevant if you append your SVGs to the DOM (e.g. you return them as part of the result of a React component render() function). If you load your SVGs as assets (files) you need not worry about the following.

A commonly used feature of SVGs is the ability to define masks and gradients in a <defs> tag, later to be applied on the SVG path itself, Like so:

import React from 'react';
import EkoUIComponents from 'EkoUIComponents';

class SvgButton extends EkoUIComponents.EkoButton {
    render() {
        return (
            <svg xmlns="http://www.w3.org/2000/svg">
                <defs>
                    <linearGradient id="myGradient"></linearGradient>
                </defs>
                <g fill="url(#myGradient)" />
            </svg>
        );
    }
}

This is however will not work on Eko projects because our pages contain a <base> tag which conflicts with the anchors (#) used to reference the definitions. However, there is a solution. Instead of calling url() directly with the anchor and your definition id, add before it window.location.href. So to the example above should in fact look like so:

import React from 'react';
import EkoUIComponents from 'EkoUIComponents';

class SvgButton extends EkoUIComponents.EkoButton {
    render() {
        return (
            <svg xmlns="http://www.w3.org/2000/svg">
                <defs>
                    <linearGradient id="myGradient"></linearGradient>
                </defs>
                <g fill={`url(${window.location.href}#myGradient)`} />
            </svg>
        );
    }
}

This creates an absolute URL which overrides the base tag the page will have. If you don’t make this change, it can create issues on Safari (both mobile and desktop).

Using Lottie Elements

Another great way to create (relatively) lightweight animations in the browser is by using Lottie. We have an example on our examples section that shows what you can do with this and we wanted to focus on a specific line in that example:

Lottie.setLocationHref(window.location.href);

Because we use a base tag on our pages, it is important you add this line to your code. Not doing so can create issues on Safari (both mobile and desktop).

Rate this page: X
Tell us more!