Help me fetch from class and add as <title>

Hi, I have a Symbol file SVG. It is like

<symbol
      
       id="symbol16060"
      
       width="16"
       height="16"
       fill="currentColor"
       class="bi bi-currency-pound"
       viewBox="0 0 16 16"

>
     
 <path
a lot of maths
         id="path1872-3" />

    </symbol>

In the first enclosure we can see class which says it is currency-pound. My effort is to copy the class value which in this case is currency-pound and use it as

<title id=currency-pound">currency-pound</title>

So that the above code will become

<symbol
      
       id="symbol16060"
      <title id="currency-pound">currency-pound</title>
       width="16"
       height="16"
       fill="currentColor"
       class="bi bi-currency-pound"
       viewBox="0 0 16 16"

>
     
 <path
a lot of maths
         id="path1872-3" />

    </symbol>

If you are confused, ignore everything. Imagine there is a text file. It has a ‘class’ with a value say Name. We need to simply take it and add a line next to it as <title id="Name">Name</title>

I can manually attempt. Sadly in the text file, there are around 1500 tags. So I would need some help to automate it.

I tried this code, but I am not sure it is doing the job

var className = document.getElementsByTagName('symbol')[0].getAttribute('class')


document.getElementsByTagName('symbol')[0].setAttribute('Title', className)


console.log(document.getElementsByTagName('svg')[0])

If there is some method to add <title> and do that for all the <symbol> tags, it will be great.

No, this isn’t how you write SVG or HTML or anything like that.

<div some="attribute" another="attribute">
  <p>Example</p>
</div>

Not

<div some="attribute" <p>Example</p> another="attribute">
</div>

So you code, you would need to firstly find an element of the kind “symbol”, get the value of the “class” attribute, create a “title” element, add the value as a child of that, then insert the “title” as a child of the “symbol”.

However, your class doesn’t map to what you’re trying to call the title (if that’s correct rather than just an example): “bi bi-currency-pound” isn’t the same as “currency-pound”. They’re are two class names and neither match what you’re trying to set as a title.


So you can do this in the browser if you fix the above issues.

Next option is that you can use something to process the file: you’d normally just write a script to do it, and you would need an XML parser that allows you to read and write, and libraries for those exist for most languages. There are likely some online apps for editing XML which may have the functionality, so Google for this.

Note that this is a sensible thing to do and to learn how to do, being able to write scripts that automate some task for you is always going to be useful – normally you use language like Python/Ruby/JS/etc

Otherwise, and probably easiest because you have one file and you just need to do this one thing 1500 times, you can use regex search/replace functionality in an editor, but it will take some of trial and error, as regex is designed for strings not grammar.

1 Like

Thanks for the effort. The code I placed is from a working SVG symbol file created using a CLI tool called SVG 2 Sprite

The Symbol file is working fine now. But if I can somehow add <title> tags to it, it will be possible to search icons by name inside Inkscape, which is like Adobe Illustrator.

At the moment the logic is to use the working file and of course looking for a <symbol> tag and class then create and add value to <title>

class shows ‘bi’ because it is the prefix for Bootstrap icons, yes - from Twitter Bootstrap.

I am trying to learn React and Python, but I am nowhere good at it yet. Hopefully there will some way I can find to get this bottleneck fixed. Thanks.

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.