Member Avatar for jParker66

I made sorting arrows for a table in illustrator and exported it out as an svg. I want to place them in a table head, and use css to style it. I will be using javascript (vannila) to swap classes to change the state of my icon.

What is the best tag to use for svg in my case?
below is sample of what I have now 

<thead>
    <tr>
        <th id="step">Step<img class="sort" src ="assets/sort-up-and-down-arrows-couple.svg"></th>
  • 5 Contributors
  • 6 Replies
  • 3K Views
  • 2 Months Discussion Span
  • Latest Post Latest Post by gentlemedia
Member Avatar for Dani

Sorry, I guess I’m a little confused by what you mean by tag? HTML tag? Like <SVG>?

commented: yes, I saw different samples online where some are using <img>, <svg> and even a <div> +0
Member Avatar for Dani

I don't use SVG images myself, but I think that you can use <img src=...> for .svg files and the <svg> tag is for inline SVG code.

Member Avatar for pankaj_patel

Simplest way to use svg fime in HTML is to use it with img[src] tag likea regular Image.

If you wanna go advanced, you can paste the SVG code as well in the HTML (except the xml namespace part) and style with CSS; as almost all the components of SVG are CSS designable.

The use case with div; you can put the SVG as baackground-image and control the size by background-size and other related CSS properties.

Member Avatar for Ross_Ostin

You need to use <img src="" />. Svg tag use only for code

Member Avatar for Dani

JParker, is your code not working? We’re you able to ever figure this one out?

Member Avatar for gentlemedia

I don't think JParker will ever come back to his thread, but here's my take on it.

For UI elements such as his sorting arrows and icons, it's common to use an (external) SVG sprites image and display them with <svg> <use> instead of a regular <img> tag.
The SVG sprites can be placed straight in the HTML, but if you want to keep your HTML 'clean' from all this messy SVG syntax, you can make an external SVG sprites image and use the SVG fragment identifier to grab the right SVG symbol out of it.

So let's say you have an up and down arrow and some social media icons, your SVG sprite will look like this:

<svg xmlns="http://www.w3.org/2000/svg">
    <symbol id="arrow-up" viewBox="0 0 8 8">
        <path d="M17.231 16L24 9.231 22.769 8 16 14.769 9.231 8 8 9.231 14.769 16 8 22.769 9.231 24 16 17.231 22.769 24 24 22.769 17.231 16z"/>
    </symbol>
    <symbol id="arrow-down" viewBox="0 0 8 8">
        <path d="M17.231 16L24 9.231 22.769 8 16 14.769 9.231 8 8 9.231 14.769 16 8 22.769 9.231 24 16 17.231 22.769 24 24 22.769 17.231 16z"/>
    </symbol>
    <symbol id="icon-instagram" viewBox="0 0 32 32">
        <path d="M7.547 0C3.39 0 0 3.39 0 7.547v10.906C0 22.61 3.39 26 7.547 26h10.906C22.61 26 26 22.61 26 18.453V7.547C26 3.39 22.61 0 18.453 0zm0 2h10.906A5.53 5.53 0 0 1 24 7.547v10.906A5.53 5.53 0 0 1 18.453 24H7.547A5.53 5.53 0 0 1 2 18.453V7.547A5.53 5.53 0 0 1 7.547 2zM20.5 4a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM13 6c-3.855 0-7 3.145-7 7s3.145 7 7 7 7-3.145 7-7-3.145-7-7-7zm0 2c2.773 0 5 2.227 5 5s-2.227 5-5 5-5-2.227-5-5 2.227-5 5-5z"/>
    </symbol>
    <symbol id="icon-facebook" viewBox="0 0 32 32">
        <path transform="translate(11.75 7.689)" d="M9.142.004L6.864 0c-2.56 0-4.215 1.697-4.215 4.324v1.994H.36A.358.358 0 0 0 0 6.677v2.888c0 .198.16.359.358.359H2.65v7.289c0 .198.16.358.359.358h2.989c.198 0 .358-.16.358-.358v-7.29h2.679c.198 0 .358-.16.358-.358l.001-2.888a.359.359 0 0 0-.358-.359h-2.68v-1.69c0-.812.194-1.225 1.252-1.225h1.535c.198 0 .358-.16.358-.359V.362a.358.358 0 0 0-.358-.358z"/>
    </symbol>
    <symbol id="icon-twitter" viewBox="0 0 32 32">
        <path transform="translate(7.5 9.164)" d="M18 1.73a7.374 7.374 0 0 1-2.12.581A3.708 3.708 0 0 0 17.503.27a7.444 7.444 0 0 1-2.347.896 3.693 3.693 0 0 0-6.292 3.367A10.483 10.483 0 0 1 1.254.675a3.665 3.665 0 0 0-.5 1.856 3.69 3.69 0 0 0 1.643 3.073A3.693 3.693 0 0 1 .724 5.14v.046a3.696 3.696 0 0 0 2.962 3.621 3.74 3.74 0 0 1-.973.13c-.238 0-.47-.024-.695-.07a3.695 3.695 0 0 0 3.448 2.565 7.409 7.409 0 0 1-4.585 1.579c-.298 0-.592-.018-.881-.051a10.437 10.437 0 0 0 5.66 1.661c6.793 0 10.506-5.626 10.506-10.505l-.013-.478A7.373 7.373 0 0 0 18 1.73z"/>
    </symbol>
</svg>

You can put that in a blank file and save it as sprites.svg in your image folder and then you can display the 'arrow up' for example in your HTML like so:

<svg>
   <use xlink:href="images/sprites.svg#arrow-up"></use>
</svg>

With this you load only one file for all your UI elements and icons and they are all in the cache at once.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.