<table class="sg-symbol-table">
    <thead>
        <tr>
            <th>Preview</th>
            <th>ID</th>
            <th>Title ID</th>
            <th>Original dimensions</th>
        </tr>
    </thead>
    <tbody>

        <tr>
            <td class="sg-svg-highlight">
                <svg role="img" class="sg-symbol-table__preview" aria-label="Arrow right" width="16.933px" height="16.933px">
                    <use xlink:href="#avatar-buildit-b"></use>
                </svg>
            </td>
            <td>
                <code>#avatar-buildit-b</code>
            </td>
            <td>
                <code>#avatar-buildit-b__title</code>
            </td>
            <td>
                <code>16.933px</code> &times; <code>16.933px</code>
            </td>
        </tr>

        <tr>
            <td class="sg-svg-highlight">
                <svg role="img" class="sg-symbol-table__preview" aria-label="Arrow right" width="16.933px" height="16.933px">
                    <use xlink:href="#avatar-buildit-stacked"></use>
                </svg>
            </td>
            <td>
                <code>#avatar-buildit-stacked</code>
            </td>
            <td>
                <code>#avatar-buildit-stacked__title</code>
            </td>
            <td>
                <code>16.933px</code> &times; <code>16.933px</code>
            </td>
        </tr>

        <tr>
            <td class="sg-svg-highlight">
                <svg role="img" class="sg-symbol-table__preview" aria-label="Arrow right" width="64px" height="64px">
                    <use xlink:href="#avatar-impossible-b-fill"></use>
                </svg>
            </td>
            <td>
                <code>#avatar-impossible-b-fill</code>
            </td>
            <td>
                <code>#avatar-impossible-b-fill__title</code>
            </td>
            <td>
                <code>64px</code> &times; <code>64px</code>
            </td>
        </tr>

        <tr>
            <td class="sg-svg-highlight">
                <svg role="img" class="sg-symbol-table__preview" aria-label="Arrow right" width="64px" height="64px">
                    <use xlink:href="#avatar-impossible-b-outline"></use>
                </svg>
            </td>
            <td>
                <code>#avatar-impossible-b-outline</code>
            </td>
            <td>
                <code>#avatar-impossible-b-outline__title</code>
            </td>
            <td>
                <code>64px</code> &times; <code>64px</code>
            </td>
        </tr>

    </tbody>
</table>
<p>Some SVGs have shapes that can be independently filled via the <code>--grav-co-svg-hl-*</code> custom properties. To visualise this, the above SVGs have such regions coloured in as follows:</p>
<ul class="sg-highlight-preview sg-svg-highlight">
    <li>

        <span class="sg-color-prop">
            <span style="background-color: var(--grav-co-svg-hl-1);"></span>
            <code>--grav-co-svg-hl-1</code>
        </span>

    </li>
    <li>

        <span class="sg-color-prop">
            <span style="background-color: var(--grav-co-svg-hl-2);"></span>
            <code>--grav-co-svg-hl-2</code>
        </span>

    </li>
    <li>

        <span class="sg-color-prop">
            <span style="background-color: var(--grav-co-svg-hl-3);"></span>
            <code>--grav-co-svg-hl-3</code>
        </span>

    </li>
</ul>
{% from '@inline-svg-symbol' import inlineSvg %}
{% from '@color-schemes' import colorProp %}

<table class="sg-symbol-table">
  <thead>
    <tr>
      <th>Preview</th>
      <th>ID</th>
      <th>Title ID</th>
      <th>Original dimensions</th>
    </tr>
  </thead>
  <tbody>
  {% for symbol in symbols %}
    <tr>
      <td class="sg-svg-highlight">
        {{ inlineSvg(symbol.symbolId, symbol.width, symbol.height, symbol.titleId, 'sg-symbol-table__preview', 'Arrow right' ) }}
      </td>
      <td>
        <code>#{{symbol.symbolId}}</code>
      </td>
      <td>
        <code>#{{symbol.titleId}}</code>
      </td>
      <td>
        <code>{{symbol.width}}</code> &times; <code>{{symbol.height}}</code>
      </td>
    </tr>
  {% endfor %}
  </tbody>
</table>
<p>Some SVGs have shapes that can be independently filled via the <code>--grav-co-svg-hl-*</code> custom properties. To visualise this, the above SVGs have such regions coloured in as follows:</p>
<ul class="sg-highlight-preview sg-svg-highlight">
  <li>
    {{ colorProp('--grav-co-svg-hl-1') | safe }}
  </li>
  <li>
    {{ colorProp('--grav-co-svg-hl-2') | safe }}
  </li>
  <li>
    {{ colorProp('--grav-co-svg-hl-3') | safe }}
  </li>
</ul>
{
  "text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam",
  "url": "#",
  "listItems": [
    {
      "htmlContent": "Some list item content"
    },
    {
      "htmlContent": "More list item content"
    },
    {
      "htmlContent": "Even more list item content"
    },
    {
      "htmlContent": "I can't believe there's still more list item content"
    },
    {
      "htmlContent": "Seriously?! That's enough now."
    }
  ],
  "footer": {
    "copy": "&copy; 2019 <strong>Buildit</strong>. All rights reserved.",
    "linksA": [
      {
        "label": "Stories",
        "url": "#"
      },
      {
        "label": "People",
        "url": "#"
      },
      {
        "label": "Jobs",
        "url": "#"
      }
    ],
    "linksB": [
      {
        "label": "Terms",
        "url": "#"
      },
      {
        "label": "Accessibility",
        "url": "#"
      },
      {
        "label": "Privacy & Cookie Policy",
        "url": "https://wiprodigital.com/privacy-policy"
      }
    ]
  },
  "hero": {
    "pullout": "Big, attention-grabbing headline",
    "paragraph": "Witty subtitle",
    "cta": {
      "text": "Clickbaity label",
      "url": "#"
    }
  },
  "img": {
    "random": {
      "src": "/images/img-random-1.png",
      "alt": "A placeholder image with an arbitrary aspect ratio."
    },
    "square": {
      "src": "/images/img-1x1.png",
      "alt": "A placeholder image with a perfect square (1:1) aspect ratio."
    },
    "tv": {
      "src": "/images/img-4x3.png",
      "alt": "A placeholder image with a 4:3 aspect ratio, like an old TV."
    },
    "widescreen": {
      "src": "/images/img-16x9.png",
      "alt": "A placeholder image with a 16:9 aspect ratio, like a widescreen TV."
    },
    "logo": {
      "src": "/images/img-random-2.png",
      "alt": "A test image for a logo with an arbitrary aspect ratio."
    }
  },
  "title": "Page title",
  "header": {
    "url": "./homepage",
    "links": [
      {
        "text": "Jobs",
        "url": "./jobs"
      },
      {
        "text": "Locations",
        "url": "./locations"
      }
    ],
    "externalLinks": [
      {
        "text": "Fancy external website",
        "url": "./error-page"
      }
    ]
  },
  "sections": [
    {
      "title": "Example section",
      "class": "grav-o-full-bleed__content",
      "content": [
        {
          "paragraph": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam."
        }
      ]
    }
  ],
  "section": {
    "title": "This is the title for a section",
    "class": "grav-o-full-bleed__content",
    "content": [
      {
        "paragraph": "Paragraph lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
      },
      {
        "blockquote": "Blockquote lorem ipsum dolor sit amet, consectetur adipisicing elit"
      },
      {
        "twoColumnsList": [
          {
            "htmlContent": "Vestibulum auctor dapibus neque."
          },
          {
            "htmlContent": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit."
          },
          {
            "htmlContent": "Aliquam tincidunt mauris eu risus."
          },
          {
            "htmlContent": "Labore et dolore magna aliqua."
          },
          {
            "htmlContent": "Phasellus tempus, orci non mattis sagittis."
          }
        ]
      },
      {
        "inlineRow": [
          {
            "text": "First link",
            "url": "#"
          },
          {
            "text": "Second link",
            "url": "#"
          },
          {
            "text": "Third link",
            "url": "#"
          }
        ]
      },
      {
        "imgCards": [
          {
            "title": "Some fascinating, attention-grabbing headling",
            "content": "Ideally, with a click-baity tagline that entices to you to visit!",
            "image": {
              "src": "/images/img-random-1.png",
              "alt": "Brief description of this fascinating image"
            }
          },
          {
            "title": "Labore et dolore magna aliqua",
            "content": "Vestibulum pharetra arcu enim, nec porttitor quam ullamcorper et. Phasellus tempus, orci non mattis sagittis, lectus erat fringilla odio, nec auctor erat augue quis eros.",
            "image": {
              "src": "/images/img-random-1.png",
              "alt": "Phasellus tempus, orci non mattis"
            }
          },
          {
            "title": "Nanotechnology immersion along the information highway",
            "content": "Leverage agile frameworks to provide a robust synopsis for high level overviews.",
            "image": {
              "src": "/images/img-random-1.png",
              "alt": "Bring to the table win-win survival strategies"
            }
          }
        ]
      },
      {
        "imgLinks": [
          {
            "url": "#",
            "image": {
              "src": "/images/img-random-1.png",
              "alt": "Image linke #1"
            }
          },
          {
            "url": "#",
            "image": {
              "src": "/images/img-random-2.png",
              "alt": "Image linke #2"
            }
          },
          {
            "url": "#",
            "image": {
              "src": "/images/img-random-3.png",
              "alt": "Image linke #3"
            }
          }
        ]
      }
    ]
  },
  "category": "avatar",
  "symbols": [
    {
      "symbolId": "avatar-buildit-b",
      "titleId": "avatar-buildit-b__title",
      "width": "16.933px",
      "height": "16.933px"
    },
    {
      "symbolId": "avatar-buildit-stacked",
      "titleId": "avatar-buildit-stacked__title",
      "width": "16.933px",
      "height": "16.933px"
    },
    {
      "symbolId": "avatar-impossible-b-fill",
      "titleId": "avatar-impossible-b-fill__title",
      "width": "64px",
      "height": "64px"
    },
    {
      "symbolId": "avatar-impossible-b-outline",
      "titleId": "avatar-impossible-b-outline__title",
      "width": "64px",
      "height": "64px"
    }
  ]
}

Consuming SVG symbols

gravity-ui-web provides all the logos and icons shown here, as SVG <symbol> elements in the symbols.svg file. The contents of that file must be inlined into your HTML document.

Then, whereever individual logos or icons need to be displayed, you can do so using the following markup:

<svg role="img">
  <use xlink:href="#symbol-id"></use>
</svg>

Where #symbol-id is taken from the ID column of the table shown in this stylegudie for the logo or icon you wish to display.

Without further styling, the logo or icon will appear as black (#000) on a transparent background. However, you can use CSS to set the fill color to something else. For example:

#symbol-id {
  fill: red;
}

Multi-coloured SVGs

Some of the available SVGs contain shapes that can be independently coloured. By default, they will all share the same current colour. However, you can selectively re-colour them via the --grav-co-svg-hl-1 / 2 / 3 custom properties. Refer to the preview tables in the pattern library to see what regions of an SVG those custom properties correspond to.

Generating the SVG symbols

gravity-ui-web uses an SVG icon system instead of an icon font. Furthermore, we use <symbols> rather than <defs>, so that we don’t need to specify the viewBox each time a glyph is referenced. The benefits of this approach are covered in the CSS-Tricks Icon System with SVG Sprites article. Of particular appeal to us were the following:

  • Richer styling control via CSS than what you can achieve with icon font glyphs.
  • Easier positioning and sizing since it behaves more like an image and avoids inline quirkiness (line-heights, vertical positioning, etc.)
  • Better accessibility by being able to include the text alternative in the SVG symbol itself.

The symbols.svg SVG symbols file is generated at build time from individual SVG files in a folder. An accompanying symbols.json file is generated that exposes all the available IDs and some associated meta-data.