1

Trying to stylize a SVG of this multi-color HTML image using CSS so that the right side of the 5 is white on hover. 

body {
  background-color: gray;
}
svg {
  height: 50vh;
  fill: white;
}
.html5 g.st2 .st0 {
  fill: transparent;
}
.html5:hover path.st0 {
  fill: #e44d26;
}
.html5:hover path.st1 {
  fill: #f16529;
}
.html5:hover g.st2 .st0 {
  fill: white;
}
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewbox="-561 1804 379 407" style="enable-background:new -561 1804 379 407;" xml:space="preserve" class="html5">
  <g>
    <path class="st0" d="M-427.3,1975.7h55.3v-42.9h-59.2L-427.3,1975.7z M-539.3,1821l30.5,341.7l136.8,38l136.9-37.9l30.5-341.8
  C-204.7,1821-539.3,1821-539.3,1821z M-261.3,2141l-110.7,30.7v-43.5l-0.1,0l-85.9-23.8l-6-67.3h42.1l3.1,34.9l46.7,12.6l0.1,0v-67
  h-93.7l-11.3-126.7h105v-41.9h136.8L-261.3,2141z" />
    <path class="st1" d="M-320.4,2017.6H-372v67l46.7-12.6L-320.4,2017.6z M-372,1848.9v41.9h105l-3.8,41.9H-372v42.9h97.4l-11.5,128.7
  l-85.9,23.8v43.5l110.7-30.7l26.1-292.1L-372,1848.9L-372,1848.9z" />
    <g class="st2">
      <polygon class="st0" points="-372,1890.8 -477,1890.8 -465.7,2017.6 -372,2017.6 -372,1975.7 -427.3,1975.7 -431.2,1932.8 
   -372,1932.8   " />
      <polygon class="st0" points="-372,2084.6 -372.1,2084.6 -418.7,2072 -421.9,2037.1 -463.9,2037.1 -457.9,2104.4 -372.1,2128.2 
   -372,2128.2   " />
    </g>
  </g>
</svg>

If you open the original svg (https://www.w3.org/html/logo/downloads/HTML5_1Color_Black.svg) in Illustrator and grab the SVG code you'll notice there's no path/class to manipulate it with. Not sure if the problem can be addressed in CSS or needs to be done in illustrator but any ideas or help would be appreciated.

Gavin Hughes
  • 21
  • 1
  • 6

1 Answers1

3

Try this svg code:

body {
  background-color: gray;
}
svg {
  height: 50vh;
  fill: white;
}

.html5:hover .body,
.html5 .right-fill {
 fill: #FFF;
}

.html5 .left-5,
.html5 .right-5 {
 fill: grey;
}

.html5:hover .body {
 fill: #E34F26;
}

.html5:hover .right-fill {
 fill: #EF652A;
}

.html5:hover .left-5 {
 fill: #EBEBEB;
}

.html5:hover .right-5 {
 fill: #FFF;
}
<svg class="html5" xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512">
  <title>HTML5 Logo Badge</title>
  <path class="body" d="M71,460 L30,0 481,0 440,460 255,512"/>
  <path class="right-fill" d="M256,472 L405,431 440,37 256,37"/>
  <path class="left-5" d="M256,208 L181,208 176,150 256,150 256,94 255,94 114,94 115,109 129,265 256,265zM256,355 L255,355 192,338 188,293 158,293 132,293 139,382 255,414 256,414z"/>
  <path class="right-5" d="M255,208 L255,265 325,265 318,338 255,355 255,414 371,382 372,372 385,223 387,208 371,208zM255,94 L255,129 255,150 255,150 392,150 392,150 392,150 393,138 396,109 397,94z"/>
</svg>
Christos Lytras
  • 36,310
  • 4
  • 80
  • 113
  • Awesome thanks!! Working with a few of these so I'm interested in the process you used (assuming these changes were made in illustrator) and/or best practices – Gavin Hughes Nov 19 '16 at 17:02
  • Well, the whole right 5 SVG path is missing from your SVG. I just got another SVG that has all the paths, including the right 5. Then I just colored it as you want it. You can save and edit it in illustrator. – Christos Lytras Nov 19 '16 at 17:05
  • Makes sense but how did you make the paths so lean? When I trace and expand a .jpg/.png or use just use a premade SVG it seems that the code for the paths are excessively long. – Gavin Hughes Nov 19 '16 at 17:49
  • I used an already made HTML5 SVG from this link here: https://www.webreflection.co.uk/img/html5.svg. Do you have problems with that SVG? Maybe I can search for another one if it does not fit to your needs. – Christos Lytras Nov 19 '16 at 17:54