Please svgify The Snowflake

Question

Around the time when mobile update happened (don't remember when it was exactly), inbox and achievements icons were svgifgied. Now plz svgify The Snowflake too :)

Answer 1

Update - Is this status-completed?!? Yay!!

Here's the current zoomed in screen:

And here's the current css:

#wb-newprofile-snowflake, .topbar .topbar-icon.icon-winterbash {
    background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20216%20216%22%20version%3D%221.1%22%20y%3D%220px%22%20x%3D%220px%22%20enable-background%3D%22new%200%200%20216%20216%22%3E%3Cpath%20fill%3D%22%23888888%22%20d%3D%22m148.6%20112.8l-6.7-3.9-10.5%206.2-15.2-8.7%2015.2-8.8%2010.7%206.5%206.7-3.9-10.7-6.5%209.9-5.7-3.5-6-9.9%205.7-0.1-12.2-6.7%203.9%200.1%2012.2-15.2%208.7v-17.4l11-6v-7.7l-11%206v-11.5h-6.7v11.5l-10.6-6v7.7l10.6%206v17.5l-15.2-8.8%200.3-12.5-6.7-3.9-0.3%2012.5-9.9-5.7-3.5%206%209.9%205.7-10.5%206.2%206.7%203.9%2010.5-6.2%2015.2%208.7-15.2%208.8-10.7-6.5-6.7%203.9%2010.7%206.5-9.9%205.7%203.5%206%209.9-5.7%200.1%2012.2%206.7-3.9-0.1-12.2%2015.2-8.7v17.6l-11%206v7.7l11-6v11.5h6.9v-11.5l10.6%206v-7.7l-10.6-6v-17.5l15.2%208.8-0.3%2012.5%206.7%203.9%200.3-12.5%209.9%205.7%203.5-6-9.9-5.7%2010.3-6.4zm-39.2-6.4l-0.1%200.1v-0.1-0.1l0.1%200.1z%22%2F%3E%3C%2Fsvg%3E')!important;
}

---

Ok, so here's the old sad snowflake, and here's an svg'd version:

<svg width="14" height="14" xmlns="http://www.w3.org/2000/svg">
  <polygon stroke="null" fill="#888888" transform="rotate(28.66 7.09,6.98)" points="3.06,1.16 4.17,0.46 5.03,1.90 5.67,0.46 6.70,1.18 5.76,3.16 7.09,5.51 8.46,2.98 7.43,1.11 8.46,0.46 9.11,1.90 9.97,0.46 11.08,1.16 10.31,2.51 11.77,2.46 11.77,3.68 9.71,3.72 8.21,6.16 10.95,6.16 12.24,4.33 13.10,5.03 12.28,6.16 13.87,6.16 13.87,7.51 12.37,7.51 13.10,8.68 12.28,9.42 10.91,7.51 8.25,7.51 9.62,9.94 11.77,10.20 11.81,11.25 10.35,11.25 11.04,12.51 9.97,13.25 9.11,11.90 8.46,13.25 7.48,12.68 8.46,10.64 7.13,8.20 5.72,10.60 6.66,12.64 5.67,13.25 4.99,11.81 4.26,13.25 3.06,12.51 3.87,11.16 2.20,11.20 2.20,10.16 4.52,9.99 5.89,7.51 3.27,7.46 1.94,9.42 1.00,8.77 1.86,7.51 0.18,7.51 0.18,6.20 1.94,6.29 1.04,4.85 1.94,4.24 3.19,6.20 5.98,6.25 4.60,3.81 2.20,3.64 2.41,2.51 3.83,2.64 "/>
</svg>

Update - here's an SVG implementation I just wrote that's much cleaner:

<svg width="200" height="200" viewBox="0 0 100 100"
     xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink">
    <def>
        <g fill="#888888" id="branch">
            <rect x="47" y="5"  width="6" height="45" />
            <rect x="47" y="10" width="6" height="20" transform="translate(-7)rotate(-45, 50, 20)"/>
            <rect x="47" y="10" width="6" height="20" transform="translate( 7)rotate( 45, 50, 20)"/>
        </g>
    </def>
    <use xlink:href="#branch" transform="rotate(0,   50, 50)" />
    <use xlink:href="#branch" transform="rotate(60,  50, 50)" />
    <use xlink:href="#branch" transform="rotate(120, 50, 50)" />
    <use xlink:href="#branch" transform="rotate(180, 50, 50)" />
    <use xlink:href="#branch" transform="rotate(240, 50, 50)" />
    <use xlink:href="#branch" transform="rotate(300, 50, 50)" />
</svg>

To test it, I added it as a gist, and served it through rawgit. Then checked to make sure it would be happy taking over it's 14px by 14px predessor with the following css:

.topbar .topbar-icon.icon-winterbash {
  background-image: url(https://rawgit.com/KyleMit/cecfb57d641ad9be755e/raw/a5fac80617d784e37b1c459c42000545b2002741/Snowflake.svg)!important;
}

Which looks like this in-page:

---

Holiday Bonus Time:

Here's the sprite with the graph bar:

<svg xmlns="http://www.w3.org/2000/svg">
  <g>
    <rect x="230.9" y="71.7" fill="#888888" width="2"   height="4.1"/>
    <rect x="233.7" y="70.8" fill="#888888" width="2.2" height="5.1"/>
    <rect x="236.7" y="69.2" fill="#888888" width="2.2" height="6.7"/>
    <rect x="239.8" y="70.5" fill="#888888" width="2.2" height="5.4"/>
    <rect x="242.9" y="68.2" fill="#888888" width="2.2" height="7.7"/>
    <polygon fill="#888888" points="232.8,68.9 233.7,68.9 233.7,69.2 235.8,69.2 235.8,68.1 236.9,67 238.9,67 238.9,66.8 239.8,66.8    239.8,67.9 241.9,67.9 241.9,66.9 243,66.3 243,66.4 245.1,66.4 245.1,64.2 243,64.2 243,65.6 241.9,66.2 241.9,65.7 239.8,65.7    239.8,66.2 238.9,66.2 238.9,64.8 236.8,64.8 236.8,66.3 235.8,67.2 235.8,67 233.7,67 233.7,68.3 232.8,68.3 232.8,67.6    230.9,67.6 230.9,69.6 232.8,69.6  "/>
  </g>
</svg>

The y and height attribute combined determine the bottom's height.
Each rect element above adds up to 75.9, except the first one only gets to 75.8

So here's a slightly improved version:

<svg xmlns="http://www.w3.org/2000/svg">
  <g>
    <rect x="230.9" y="71.7" fill="#888888" width="2"   height="4.2"/>
    <rect x="233.7" y="70.8" fill="#888888" width="2.2" height="5.1"/>
    <rect x="236.7" y="69.2" fill="#888888" width="2.2" height="6.7"/>
    <rect x="239.8" y="70.5" fill="#888888" width="2.2" height="5.4"/>
    <rect x="242.9" y="68.2" fill="#888888" width="2.2" height="7.7"/>
    <polygon fill="#888888" points="232.8,68.9 233.7,68.9 233.7,69.2 235.8,69.2 235.8,68.1 236.9,67 238.9,67 238.9,66.8 239.8,66.8    239.8,67.9 241.9,67.9 241.9,66.9 243,66.3 243,66.4 245.1,66.4 245.1,64.2 243,64.2 243,65.6 241.9,66.2 241.9,65.7 239.8,65.7    239.8,66.2 238.9,66.2 238.9,64.8 236.8,64.8 236.8,66.3 235.8,67.2 235.8,67 233.7,67 233.7,68.3 232.8,68.3 232.8,67.6    230.9,67.6 230.9,69.6 232.8,69.6  "/>
  </g>
</svg>

Although there might be other things to clean up

Note: Stack Exchange operates under a cc by-sa 3.0 anyway, but they, and anyone else, have my full permission to use this code for any and all purposes.

Update with zooming

Ok, here's a really rough draft on having some interactions and depth. It's only one layer and doesn't quite overlap great, but it's a foundation that could hopefully be expanded upon.
^{Note: Zoom on the perimeter}

// create canvas
var s = Snap(300, 300);

// set defaults
var rectWidth = 6;
var halfRectWidth = rectWidth / 2;
var middleX = 50;
var middleY = 50;
var twigHeight = 20;
var numberOfBranches = 6;
var degreeSegment = 360 / numberOfBranches;

// create trunk
var trunk = s.rect(middleX - halfRectWidth, 5, rectWidth, 45)
             .addClass("trunk");

// create twigs
for (i = 0; i < 2; i++) {
  var direction = (i == 0) ? -1 : 1;
  var twig = s.rect(middleX - halfRectWidth, 10, rectWidth, twigHeight)
        .addClass("twig")
        .transform(
          new Snap.Matrix()
              .translate(direction*(rectWidth + 1), 0)
              .rotate(direction*45, middleX, 20)
        );
}

// create branch
var base = Snap.selectAll(".trunk, .twig")
var branch = s.group(base)
              .addClass("branch");

// build snowflake
for (i = 0; i < numberOfBranches; i++) {
  var branchClone = branch.clone()
      .transform(
        new Snap.Matrix()
            .rotate(i * degreeSegment, middleX, middleY));
}

// create snowflake
var branches = Snap.selectAll(".branch")
var snowflake = s.group(branches)
                 .attr({
                   class: "snowflake",
                   fill: "#888888"
                 });

// build outside snowflakes
for (i = 0; i < numberOfBranches; i++) {
  var branchClone = snowflake.clone()
      .attr({
        class: "snow-1",
        fill: "black"
      })
      .transform(
        new Snap.Matrix()
           .rotate(i * degreeSegment, middleX, middleY)
           .translate(0, -35)
           .scale(.3, .3, middleX, middleY)
      );
}
// build center snowflake
var clone = snowflake.clone()
  .attr({
    class: "snow-1",
    fill: "black"
  })
  .transform(
    new Snap.Matrix()
      .scale(.3, .3, middleX, middleY)
  );

// capture new snowflakes
var $snow1 = Snap.selectAll(".snow-1")

// set visibility based on zoom
function setVisibility(zoomLevel) {
  $snow1.attr({
    opacity: (zoomLevel - 1) * 7 / 100
  });
}

// set initial visibility
setVisibility(1);

// set zoom with options
s.zpd({
  zoomScale: 2,
  zoomed: setVisibility
});
  

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script>
<script src="http://kylemit.github.io/snap.svg.zpd/snap.svg.zpd.js"></script>

Answer 2

Woah, woah, woah. The snowflake can wait, we have a far more serious problem here:

Just look at that first bar, it doesn't start at the same position as all the others at all. I always knew something was off about that icon, but I didn't fully notice until I saw the enlarged version here. ALL OUR REPUTATION NOTIFICATIONS HAVE BEEN PIXEL-UNPERFECT LIES!