Themed SVG Images

Overview

SVG (scalable vector graphics) is a format for vector images. The main benefit to vector images is that they can scale to any size without degradation, but another benefit is that simple monochrome SVG images can have their color themed just like text. This helps these images visually blend in with the rest of the application in a harmonious way.

These kinds of images are ideal for displaying a logo within the application. We support theming for these SVG images in the header and in the function content area. SVG images in the content area can have either regular styling or bright styling.

There are constraints on the kind of SVG file that can be themed. You should communicate these constraints to whoever designs the SVG file.

• The SVG must be monochrome (namely black).
• The SVG must only specify elements that have a fill attribute, such as paths. Our theming specifies values for the fill attribute in the SVG’s elements. Try to simplify the SVG to as few paths as possible.
• All fill values in the SVG must be pure black and all stroke values must be transparent. Otherwise the SVG may include internal CSS that interferes with our external theming.
• The SVG content must be specified inline within your HTML. We cannot externally theme an SVG in an img tag or an SVG used as the background of another element. You can copy/paste the content from svg file into your HTML.

Development

Web component development

SVG in the Header

• Put the svg content in the header, within the rui-header-left element.
  • If you use an SVG image for your application title, do not also use the rui-header-title component.
• Apply the rui-header-svg CSS class to the SVG tag.
• Specify an appropriate width for the SVG tag.
• Do not specify the height; that is hardcoded to 50px by the theming.

<rui-header-left slot="header-left">
    <svg class="rui-header-svg" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
        viewBox="0 0 150 24" style="width:150px" xml:space="preserve">
        <path d="..." />
    </svg>
</rui-header-left>

SVG in the Content

• Put the svg content in the appropriate place in the page content.
• Apply the rui-content-regular-svg CSS class to the SVG for regular styling (same color as rui-regular-text-label) or the rui-content-bright-svg CSS class for bright styling (same color as rui-bright-text-label).
• Specify an appropriate width for the SVG tag.

<rui-display-block>
    <svg class="rui-content-bright-svg" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 150 24" style="width:300px" xml:space="preserve">
        <path d="..." />
    </svg>
</rui-display-block>

Angular component development

SVG in the Header

• Put the svg content in the header, within the jha-header-left element.
  • If you use an SVG image for your application title, do not also use the jha-header-title component.
• Apply the jha-header-svg CSS class to the SVG tag.
• Specify an appropriate width for the SVG tag.
• Do not specify the height; that is hardcoded to 50px by the theming.

<jha-header-left>
    <a routerLink="/Home">
        <svg class="jha-header-svg" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
         xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         viewBox="0 0 150 24" style="width:150px" xml:space="preserve">
            <path d="..." />
        </svg>
    </a>
</jha-header-left>

SVG in the Content

• Put the svg content in the appropriate place in the page content.
• Apply the jha-content-regular-svg CSS class to the SVG for regular styling (same color as jha-regular-text-label) or the jha-content-bright-svg CSS class for bright styling (same color as jha-bright-text-label).
• Specify an appropriate width for the SVG tag.

<jha-display-block>
    <svg class="jha-content-bright-svg" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 150 24" style="width:300px" xml:space="preserve">
        <path d="..." />
    </svg>
</jha-display-block>

Design

Place the SVG into either the header or the function content area.

Set the SVG’s fill to either the regular text color or the bright text color.