Just inlining SVG seems to be the easiest and most flexible icon system. But that chunk of might have a , and you might be appying IDs to both of those elements for various reasons.

One of those reasons might be because you just want an ID on the icon to uniquely identify it for JavaScript or styling purposes.

Another of those reasons is that for accessibility, it’s recommended you use aria-labelledby to connect the id and title, like:




  
  
  Short Title (e.g. Add to Cart)

  
  A friendly looking cartoon cart icon with blinking eyes.

  
  

But now you include that SVG somewhere twice. Say you’re in Rails…

< %= render "/icons/icon.svg.erb" %>

yadda yadda yadda

< %= render "/icons/icon.svg.erb" %>

Now you’ll have two elements on the page with the exact same ID, which is… bad?

It’s definitely bad if you’re relying on that ID for anything JavaScript related, because JavaScript will only find the first one and that might be confusing and weird.

I’m not entirely sure if it’s bad for accessibility. Perhaps someone else can weigh in there. Assuming the titles are the same, my guess is that it won’t matter much.

It’s bad for HTML semantics, I suppose, but I’m always kinda meh on that if there are no repercussions.

If you’re really interested in fixing this issue, my go-to would be to pass in the ID’s to be used manually.

Again if you were in Rails, you could pass locals:

< %=
  render(
    partial: "parts/modules/search",
    locals: {
      svg_id: "my-icon",
      title_id: "my-icon-title",
      desc_id: "my-icon-desc"
    }
  )
%>

And then design the icons to use those locals, like

" ... >
 
   

A PHP app could set variables before an include:

$svg_id = "...";
$title_id = "...";
include("/icons/icon.svg.php");

Now it’s just on you to manage IDs to make them unique like we’ve always done with IDs.

This little post was inspired by Austin Wolf, who had this problem and thought through some solutions. This also included auto-generating unique IDs:


  star icon
  // ...
 

That also seems like a good solution to me.

I’d be interested to hear more thoughts!


If You’re Inlining SVG Icons, How Do You Deal With Unique Titles and IDs? is a post from CSS-Tricks

CSS Tricks Go to Source
Author: Chris Coyier

Powered by WPeMatico

2017-07-08T03:02:33+02:00July 8th, 2017|Categories: News, Tutorials|Tags: |
We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it. Ok