xisyn Xi synthetic. xisyn Quantum software. https://xisyn.com 'Roboto', sans-serif https://fonts.googleapis.com/css?family=Roboto 400,400i,700,700i
xisyn.logo.svg.style

Web Design

A Logogami SVG is designed for easy integration into your website or web app. It contains multiple logo variations, favicon support, CSS color variables, and font data — all in one file.

Embedding

Each logo is available as a <svg><use href="#id"></svg> element. However, browsers block using referencing logos from a different domain. So you can't use a logo directly from the CDN, you'll need to embed. There are three approaches:

  1. Load inline from CDN using JavaScript. This is the recommended approach, as updates made in Logogami will automatically update your site. Plus lazy loading like this is more performant:
    Load the SVG via fetch and inject it into the DOM at runtime. 
    <script>
const headers = { accept: "image/svg+xml", "Access-Control-Allow-Origin": "*" };
fetch('https://cdn.logogami.com/undefined.logo.svg')
  .then(r => r.text())
  .then(svgText => {
    const div = document.createElement('div');
    div.style.display = 'position:absolute;width:0;height:0;overflow:hidden';
    div.innerHTML = svgText;
    document.body.appendChild(div);
    // You can now use <use href="#symbol-id"> anywhere on the page
  });
</script>
  2. Inline the entire SVG:
    Embed the full SVG directly in your HTML (preferably in a hidden div). The full SVG is the text contents of Download undefined.logo.svg. 
    <div id="logogami" style="display:none">
  <!-- full SVG goes here -->
</div>
  3. Download and self-host:
    Download undefined.logo.svg and place it in your website’s assets folder. Inline it server-side or client-side as needed. Or you can refer to your path in the same domain like: 
    <svg><use href="/path/undefined.logo.svg#symbol-id" /></svg>

Using Logos

The SVG includes multiple <symbol> elements for modular logo use.

  • <use href="#logomark"></use> — "logomark"
  • <use href="#logotype"></use> — "logotype"
  • <use href="#masthead"></use> — "masthead"
  • <use href="#hero"></use> — "hero"
  • <use href="#favicon"></use> — "favicon"

You will likely need to set the size, either with CSS or svg attribute. You can apply dark mode if the CSS is included, or embedded inline:

<svg style="color-scheme: dark; width: 128px;">
  <use href="#favicon" />
</svg>

Favicon

You can generate a favicon from the Logogami SVG using the Asset Maker. If the logo is set to show the favicaon by default, use it directly:

<link rel="icon" href="/undefined.logo.svg" type="image/svg+xml">

Color Variables

This SVG includes CSS variables in a <style> block inside the SVG. These can be extracted into your site’s CSS:

:root {
  --color-primary: #00A99D;
  --color-secondary: #2E3192;
  --color-body: #242323;
  --color-panel: #c8d2d6;
  --color-background: #edf2f4;
}
.logo-card {
  --color-primary: #2E3192;
  --color-secondary: #edf2f4;
  --color-body: #242323;
  --color-panel: #c8d2d6;
  --color-background: #00A99D;
}

You can copy these into your global stylesheet or extract them automatically with JavaScript.

Then use them in your CSS:

body {
  background-color: var(--color-body);
  color: var(--color-body);
}

Fonts

This logo references the following font stack and source:

To use this font in your site, include it in your HTML:

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

And apply the font stack to your logo or brand elements:

body {
  font-family: 'Roboto', sans-serif;
}
Loading...