Is There An Equivalent Technique To Image Replacement For Use With Inline SVG

Question

There are a wealth of techniques for implementing image replacement with background images, but I find myself using inline SVG more and more (primarily because I can manipulate its components with CSS).

However in places (like links and headers) where text content is important for SEO, SVG alone doesn't cut it. Are there any equivalent techniques in the wild allowing text within a header or anchor to be visually hidden whilst leaving inline SVG unaffected.

Note: I know that Google does index SVG, but it seems quite arbitrary, even with liberal usage of <title> and <desc>.

Answer 1

I can only suggest the following based on this article by Chris Coyier at CSS-Tricks.com

Reference Article

First, define your SVG

<!-- TEMPLATE -->
<svg width="100px" height="100px" viewBox="0 0 100 100" class="hardcore-hide">
  <circle id="template" cx="50" cy="50" r="50">
    </svg>

..but the hide it with display:none;

Use a standard div (or element) with an absolutely positioned child of 100% size.

Then add a SVG use element inside the absolutely positioned child

  <div class="logo circle-1">
    <h1>Logo text</h1>
    <svg viewBox="0 0 100 100" class="circle circle-1">
      <use xlink:href="#template">
        </svg>
      </div>

CSS (so far) would look something like this.

.hardcore-hide {
  display: none;
}

.circle {
  height: 100px;
  width: 100px;
}

body {
  padding: 1rem;
}

.logo {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  border:1px solid grey;
  width:200px;
  height:100px;
  position: relative;
  display: inline-block;
}

.logo svg {
  position: absolute;
  height:100%;
  width:100%;
  top:0;
  left:0;
}

then you can add addtional styling as follows

.circle-1  svg {
  fill: red;
}
.circle-2 svg {
  fill: orange;
}
.circle-3  svg {
  fill: #f06d06;
}

Codepen Demo