svg sprite / Rotate Icon 180°

Question

I am new with the use of svg-sprites. I was wondering if there is a way to rotate an Icon from the sprite directly.

I tried to apply // transform: rotate(180) // to my icons-sprite.svg but I am doing something wrong, as the icon just disappears.

Here is the source code for my svg:

 <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="icons-sprite" transform="translate(1.000000, 0.000000)">
            <g id="thumb-down" transform=" translate(48.000000, 719.000000)">
                <polygon id="Path" points="0 0 24 0 24 24 0 24"></polygon>
                <path d="M15,2 L6,2 C5.17,2 4.46,2.5 4.16,3.22 L1.14,10.27 C1.05,10.5 1,10.74 1,11 L1,13 C1,14.1 1.9,15 3,15 L9.31,15 L8.36,19.57 L8.33,19.89 C8.33,20.3 8.5,20.68 8.77,20.95 L9.83,22 L16.42,15.41 C16.78,15.05 17,14.55 17,14 L17,4 C17,2.9 16.1,2 15,2 Z M19,2 L19,14 L23,14 L23,2 L19,2 Z" id="Shape" fill="#DB303E" fill-rule="nonzero"></path>
            </g> ....

And here where I call the "_down" Icon via CSS:

&__down {
      background: url('/images/icons/svg/icons-sprite.svg') -48px -692px
        no-repeat;
      background-size: 125px;
      &_opac{
        opacity: 0.4;
        background: url('/images/icons/svg/icons-sprite.svg') -48px -692px
        no-repeat;
      background-size: 125px;
      }
    }

As mentioned, applying transform="rotate(180)" to the CSS file works fine, but I was wondering if it is more convenient (for whatever reason) to do it in the svg file. Here is what I have tried:

<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="icons-sprite" transform="rotate(180) translate(1.000000, 0.000000)">
            <g id="thumb-down" transform=" translate(48.000000, 719.000000)">
                <polygon id="Path" points="0 0 24 0 24 24 0 24"></polygon>
                <path d="M15,2 L6,2 C5.17,2 4.46,2.5 4.16,3.22 L1.14,10.27 C1.05,10.5 1,10.74 1,11 L1,13 C1,14.1 1.9,15 3,15 L9.31,15 L8.36,19.57 L8.33,19.89 C8.33,20.3 8.5,20.68 8.77,20.95 L9.83,22 L16.42,15.41 C16.78,15.05 17,14.55 17,14 L17,4 C17,2.9 16.1,2 15,2 Z M19,2 L19,14 L23,14 L23,2 L19,2 Z" id="Shape" fill="#DB303E" fill-rule="nonzero"></path>
            </g>

But it does not seem to work. My Icon just disappears when trying.

Thank you very much for your help!!

Carlos

enxaneta enxaneta · Accepted Answer · 2019-11-07T10:31:36

To start with you have lot of useless code like translating the shapes to and fro. You can simplify the code to this:

<svg viewBox="0 0 24 24">
            <g id="thumb-down">
                <polygon id="Path" points="0 0 24 0 24 24 0 24"></polygon>
                <path d="M15,2 L6,2 C5.17,2 4.46,2.5 4.16,3.22 L1.14,10.27 C1.05,10.5 1,10.74 1,11 L1,13 C1,14.1 1.9,15 3,15 L9.31,15 L8.36,19.57 L8.33,19.89 C8.33,20.3 8.5,20.68 8.77,20.95 L9.83,22 L16.42,15.41 C16.78,15.05 17,14.55 17,14 L17,4 C17,2.9 16.1,2 15,2 Z M19,2 L19,14 L23,14 L23,2 L19,2 Z" id="Shape" fill="#DB303E" fill-rule="nonzero"></path>
                </g>
          </svg>

In order to have a thumb up you can use this transformation for the path: transform="scale(-1,-1) translate(-24,-24)":

<svg viewBox="0 0 24 24">
            <g id="thumb-up">
                <polygon id="Path" points="0 0 24 0 24 24 0 24"></polygon>
                <path transform="scale(-1,-1) translate(-24,-24)" d="M15,2 L6,2 C5.17,2 4.46,2.5 4.16,3.22 L1.14,10.27 C1.05,10.5 1,10.74 1,11 L1,13 C1,14.1 1.9,15 3,15 L9.31,15 L8.36,19.57 L8.33,19.89 C8.33,20.3 8.5,20.68 8.77,20.95 L9.83,22 L16.42,15.41 C16.78,15.05 17,14.55 17,14 L17,4 C17,2.9 16.1,2 15,2 Z M19,2 L19,14 L23,14 L23,2 L19,2 Z" id="Shape" fill="#DB303E" fill-rule="nonzero"></path>
                </g>
          </svg>

Since you intend to use it as a sprite you can put it all in the same svg element like so:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
<style type="text/css">
 <![CDATA[  
    svg > svg:not(:target) {
    display: none;
    }
     ]]> 
</style>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" id="thumb-down">
    <g id="thumb">
                <polygon id="Path" points="0 0 24 0 24 24 0 24"></polygon>
                <path d="M15,2 L6,2 C5.17,2 4.46,2.5 4.16,3.22 L1.14,10.27 C1.05,10.5 1,10.74 1,11 L1,13 C1,14.1 1.9,15 3,15 L9.31,15 L8.36,19.57 L8.33,19.89 C8.33,20.3 8.5,20.68 8.77,20.95 L9.83,22 L16.42,15.41 C16.78,15.05 17,14.55 17,14 L17,4 C17,2.9 16.1,2 15,2 Z M19,2 L19,14 L23,14 L23,2 L19,2 Z" id="Shape" fill="#DB303E" fill-rule="nonzero"></path></g>
          </svg>

  <svg  version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"  id="thumb-up">
      <use xlink:href="#thumb" transform="scale(-1,-1) translate(-24,-24)" />
          </svg>
</svg>

Please observe that in order to simplify even further the code I'm reusing the thumbs_down:

<use xlink:href="#thumb" transform="scale(-1,-1) translate(-24,-24)" />

Now you use the same file for the thumb-down and thumb-up like so:

background: url('/images/icons/svg/icons-sprite.svg#thumb-down');
...
background: url('/images/icons/svg/icons-sprite.svg#thumb-up');

div{
width:100px;
height:100px;
background-size:cover;
background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/SOquestion.svg#thumb-up);}

<div></div>

svg sprite / Rotate Icon 180°

1 Answers