Photoshop Question posted in
The official user guide can be found here.

If I will use more number of SVG icons in web application, I couldn't use directly giving the code as below mentioned for every icons – Photoshop

If I will use more number of SVG Sprite icons in web application, it is very tough to use as below mentioned code for every icons. Is there any other easy ways to implement on web applications for more number of icons? 

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="16.3px"
         height="26.9px" viewBox="0 0 16.3 26.9" enable-background="new 0 0 16.3 26.9" xml:space="preserve">
    <g id="bg">
    </g>
    <g id="ui">
        <g>
            <polygon points="8.1,0 10.3,4.3 15.2,5 11.7,8.3 12.5,13 8.1,10.8 3.8,13 4.6,8.3 1.1,5 6,4.3         "/>
            <polygon fill="none" stroke="#000000" stroke-miterlimit="10" points="8.1,13 10.3,17.3 15.2,18 11.7,21.3 12.5,26 8.1,23.8 
                3.8,26 4.6,21.3 1.1,18 6,17.3       "/>
        </g>
    </g>
    <g id="pop_ups">
    </g>
    </svg>

Is there any other different ways to use more number of icons on web applications?

Tags:

2

Answers


  1. 0

    One way of doing it is giving your star an id and reuse it with a use element. In fact the first SVG, the one where you keep your code may be hidden. 

    svg{border:1px solid;}
    <svg width="16.3px" height="26.9px" viewBox="0 0 16.3 26.9">
    <polygon id="star" points="8.1,0 10.3,4.3 15.2,5 11.7,8.3 12.5,13 8.1,10.8 3.8,13 4.6,8.3 1.1,5 6,4.3"/>
</svg>
<svg width="16.3px" height="26.9px" viewBox="0 0 16.3 26.9">  
     <use fill="none" stroke="#000000" xlink:href="#star" y="5"/>
</svg>

    In this case you may give your <use> element an x and/or an y attribute. This is allowing you to move the star where ever you need it.

    An other option id putting the code for your icons in a <symbol> and reuse it exactly like before with the bonus that a <symbol> can have a viewBox attribute and this is allowing you to have it in different sizes. For this you may give your <use> element an width and/or a height attribute.

    svg{border:1px solid;}
    <svg width="16.3px" height="26.9px" viewBox="0 0 16.3 26.9">
<symbol>
    <polygon id="star" points="8.1,0 10.3,4.3 15.2,5 11.7,8.3 12.5,13 8.1,10.8 3.8,13 4.6,8.3 1.1,5 6,4.3" viewBox="0 0 16.3 26.9"/>
</symbol>
    <use fill="none" stroke="#000000" xlink:href="#star"/>
</svg>
<svg width="40" height="40" viewBox="0 0 16.3 26.9">  
    <use fill="none" stroke="#000000" xlink:href="#star" width="30" y="5" />
</svg>

    Please note that is better to leave the main path (#star in this case) without a fill and a stroke. This way you can give your <use> element a stroke and a fill so you can get differently filled or stroked stars

    <svg width="16.3px" height="26.9px" viewBox="0 0 16.3 26.9">
<symbol>
    <polygon id="star" points="8.1,0 10.3,4.3 15.2,5 11.7,8.3 12.5,13 8.1,10.8 3.8,13 4.6,8.3 1.1,5 6,4.3" viewBox="0 0 16.3 26.9"/>
</symbol>
    <use fill="skyBlue" stroke="#000000" xlink:href="#star"/>
</svg>
<svg width="40" height="40" viewBox="0 0 16.3 26.9">  
    <use fill="gold" stroke="#000000" xlink:href="#star" width="30" y="5" />
</svg>
    Login or Signup to reply.
  2. 0

    If you’re not going to access the inner parts of your SVG with code (ie to change the color with a CSS class, or animate them with JavaScript), then you can just use an img tag and set the SVG as the source like you would with any normal image. You still get a lot of the benefits that SVGs offer like perfect scaling, etc. For example: 

    <img src="yourIcon.svg">

    Should work. Good luck!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search