Trying to position text next to an SVG - Not sure if I'm doing it right

HTML & CSS
1

Hello,
I have anchor links that represent tags, and I want to display them inside a colored box. Inside the box, I would like to place a small SVG icon on the left side, next to the links, like so:

tags

This is the HTML markup I use:

<p>
  Tags
  <a class="tag" href="">
    <svg xmlns="http://www.w3.org/2000/svg" class="icon-tag" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
      <path stroke="none" d="M0 0h24v24H0z"/>
      <path d="M11 3L20 12a1.5 1.5 0 0 1 0 2L14 20a1.5 1.5 0 0 1 -2 0L3 11v-4a4 4 0 0 1 4 -4h4" />
      <circle cx="9" cy="9" r="2" />
    </svg>
    tag1</a>
  <a class="tag" href="">
    <svg xmlns="http://www.w3.org/2000/svg" class="icon-tag" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
      <path stroke="none" d="M0 0h24v24H0z"/>
      <path d="M11 3L20 12a1.5 1.5 0 0 1 0 2L14 20a1.5 1.5 0 0 1 -2 0L3 11v-4a4 4 0 0 1 4 -4h4" />
      <circle cx="9" cy="9" r="2" />
    </svg>
    tag2</a>
</p>

And the full example on codepen:

I’m using inline-flex on the anchor element, but I’m not sure if that’s the right approach. Also, I’m not sure if repeating the svg markup for each tag would be an issue.

I appreciate any suggestions you might have. Thank you.

2

Just a quick tinker. I have changed your paragraph to a div container, and I dropped the inline for flexbox.

.tags-container {
  display: flex;
  align-items: center;
  padding: 20px;
  column-gap: 10px;
}

a.tag {
  display: flex;
  align-items:center;
  column-gap: 5px;
  color: #fff;
  background-color: #1F93A1;
  padding: .5rem;
  border-radius: 0.2rem;
  font-size: 1.2rem;
  text-decoration: none;
}

.icon-tag {
  width: 20px;
  height: 20px;
}

FYI only put the body of your html into codepen’s editor, not the html, head tags etc.

<div class='tags-container'>
  <span class='label'>Tags</span>
  <a class="tag" href="">
    <svg xmlns="http://www.w3.org/2000/svg" class="icon-tag" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
      <path stroke="none" d="M0 0h24v24H0z"/>
      <path d="M11 3L20 12a1.5 1.5 0 0 1 0 2L14 20a1.5 1.5 0 0 1 -2 0L3 11v-4a4 4 0 0 1 4 -4h4" />
      <circle cx="9" cy="9" r="2" />
    </svg>tag1
  </a>
  <a class="tag" href="">tag2</a>
</div>

I’m sure better advice will be along soon :slight_smile:

2 Likes
3

Not better but just different.:slight_smile:

If you are going to use the svg more than once then use a use element and you can reference the same svg multiple times with considerably less code.

I left the p tag in place but a list structure might be more semantic if its a list of tags.

2 Likes
4

That’s great to know :+1:

5

Is this doing anything?

Also, your CSS makes the SVG 20 x 20 pixels so in my view this is not necessary:

1 Like
6

Thank you both! I really appreciate your time. I tried moving the text up by about 2px using line-height, but it didn’t work. Is there a way to nudge it up just a bit? If not, I’ll leave it as is.

Also, I have multiple SVGs, but not all of them are on the same page. For example, I have an SVG representing a clock or a small calendar, which are used for blog posts to display the publication date. I was wondering if I could define all the SVGs in index.html, even if some of them aren’t used on index.html. Would that be an issue? Normally, I don’t think it should cause performance problems since they are just definitions at the bottom of the page (before the footer element), right? The thing is, the definitions will be loaded on every page, but at least I’ll know that they are available.

7

The easiest way wold be to put a span around it and nudge it up a bit.

.tag span {
  transform: translateY(-2px);
}

<a class="tag" href="">
    <!-- Reuse the same symbol -->
    <svg class="icon-tag" width="24" height="24">
      <use href="#icon-tag"></use>
    </svg>
    <span>tag3</span>
  </a>

However, they seemed to have been perfect before they were moved to me :slight_smile:


(Note: I removed the xlink as that’s deprecated in favour of link in the use element)

To reuse the svg you have to have the target on the same page so as you suggest you would have a lot of extra html if you include all your sites svg definitions on every page.

I suppose it depends on how many you actually have and whether it makes it easier for you to manage like that.

1 Like
8

The code for your SVGs is very, very much smaller than the code for JPG and PNG images so you are worrying unnecessarily about performance.

2 Likes
9

Yes, but using a <defs> element like Paul suggested is probably a better idea. Last time I checked Google PageSpeed Insights, it said having too many SVGs put more workload on the DOM. This might be because of the many attributes they have. When I got that warning, I had copied and pasted the same SVGs several times instead of using a separate definition.

10

You could also use the svg as background-image.

zoltankr.zip (1.3 KB)

1 Like