Developer Programs
Vendor Integration Program (VIP)
Direct access to Jack Henry's technical integration resources.
Technical Account Manager (TAM)
Get technical integration help from a single point of contact.
Developer Account
Create a developer acccount to access resources that help you integrate with Jack Henry.
Learn
Shared Responsibility
Learn about shared roles and responsibilities of customers and Jack Henry in open banking.
Developer Use Cases
Find a use case that fits your development needs.
Developer Video Gallery
Watch the latest demos, webinars, and more.
Developer Conference
Connect with industry leaders, gain insights from expert speakers, and explore our latest innovations.
Docs
Admin API
Create solutions for an institution's back office support tools.
Authentication Framework
Map customer identities to your existing system IDs.
Consumer API
Access financial data for user accounts, transactions, and more.
Data Broker
Get deeper access to financial institution data.
Enterprise Event System
Respond to events in real-time using this powerful pub/sub-based solution.
jXchange - REST API
Translate business information between Jack Henry and third-party applications using a REST-based API.
jXchange - SOAP API
Translate business information between Jack Henry and third-party applications using a SOAP-based API.
Operational Data Integration (ODI)
Get customized queries for bulk data needs.
Payments
Embed check deposits, ACH, bill pay, cards, and real-time payments.
Plugin Framework
Embed the best of the fintech world directly into your user's dashboard.
SymXchange
Query Symitar core member accounts, post transactions, run PowerOn scripts, and more.
Xperience
Modern UI that provides consistent visual integration across Jack Henry products.

Themed SVG Images

Components > Miscellaneous > Themed SVG Images
Use this feature to...
Display an SVG image using themed colors
See this feature in action...
Test out this feature in a hosted version of the sample app

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.
SVG in the header
<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.
SVG in the content
<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 wrapper 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.
SVG in the header
<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.
SVG in the content
<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.

Support options
Have questions on this topic?
Join the Responsive UI team in Microsoft Teams to connect with the community.
See something in this page that needs to change?
Send us feedback on this page.
Last updated Tue Apr 18 2023