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>.

I think you have this round the wrong way. It should, properly be called "test replacement". What precisely are you trying to do? Moving the text and replacing with a background SVG should not be an issue. — Paulie_D, Apr 30 '14 at 13:53
Have you tried something like this? It's just a regular image/text replacement deal though: http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/ *However, I haven't worked much with svg, so it may not work — Meg, Apr 30 '14 at 13:56
As long as the image is a background element it would work much the same. Using inline SVG would be more of an issue. — Paulie_D, Apr 30 '14 at 14:01
This might be useful though: http://css-tricks.com/svg-tabs-using-svg-shape-template/ — Paulie_D, Apr 30 '14 at 14:08
@Paulie_D Image Replacement has been the name for it for as long as I can remember. As my question makes clear, I'm not referring to using background images. The title uses the words 'Inline SVG'. — Undistraction, Apr 30 '14 at 14:34
Sure but what I'm trying to say is **why** are you replacing the text? I can see it in the occasional logo etc. but in general use...it doesn't seem logical. **What, precisely, are you trying to do?** — Paulie_D, Apr 30 '14 at 14:36
@Megan As the link in the first line of the question shows, I am aware of common image replacement techniques. The whole point of the question to address the equivalent for embedded SVG. — Undistraction, Apr 30 '14 at 14:36
@Pedr Oh, you're right. I totally missed that link... the text colours are too similar. — Meg, Apr 30 '14 at 17:33

score 0 · Answer 1 · answered Apr 30 '14 at 14:59

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

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

1 Answers1