Skip to main content
Code Golf

Return to Answer

...and if there's no CSS, and they aren't in use elements, there's no need for those paths to have IDs. Comment about size also no longer accurate.
Source Link
Tim Pederick
Tim Pederick
  • 1.7k
  • 14
  • 17

SVG, 562 540 520 504 487487 473 bytes

This is my first time golfing SVG (or any markup, in fact); be gentle!

The assumed viewing environment is an SVG-capable web browser with anything like a typical window size. I tested it in Firefox 50 and in Chrome 55.

The viewBox is necessary to meet the 100-pixel requirement (blowingrequirement; blowing up all measurements by a suitable factor of 4 would also work but would take 8 more bytes, if I have counted correctly). Incidentally, it is possible to save another byte by removing the space in 0 -5 in the viewBox value, but Firefox won't accept this as valid (whereas Chrome will).

The aspect ratio is 1:1 instead of the true 0.866:1. I'm not sure exactly how the "factor of 2" rule is meant to be interpreted (I think it means that exaggeration as extreme as 0.433:1 or 1.732:1 is acceptable), but I'm pretty sure this meets the requirement anyway.

SVG

<svg xmlns="http://www.w3.org/2000/svg" xmlns:l="http://www.w3.org/1999/xlink" viewBox="0 -5 26 26"><g id="a"><path d="m7,9H3V5h6z"/><g id="f"><path id="b" fill="red" d="m9,5H3V1h4z"/><path id="c" fill="blue" d="m3,1l2,4L3,9l-2-4z"/></g></g><use l:href="#a" x="3" y="6"/><use l:href="#e" x="12"/><g id="e"><use l:href="#a" x="-6" y="12"/><use l:href="#a" x="-12" y="12"/></g><use l:href="#a" x="-9" y="6"/><use l:href="#a" x="-6"/><use l:href="#a" x="-3" y="-6"/><use l:href="#f"/></svg>

Result

A PNG rendering of the above SVG code for Reutersvärd's Triangle

SVG, 562 540 520 504 487 bytes

This is my first time golfing SVG (or any markup, in fact); be gentle!

The assumed viewing environment is an SVG-capable web browser with anything like a typical window size. I tested it in Firefox 50 and in Chrome 55.

The viewBox is necessary to meet the 100-pixel requirement (blowing up all measurements by a factor of 4 would also work but would take 8 more bytes, if I have counted correctly). Incidentally, it is possible to save another byte by removing the space in 0 -5 in the viewBox value, but Firefox won't accept this as valid (whereas Chrome will).

The aspect ratio is 1:1 instead of the true 0.866:1. I'm not sure exactly how the "factor of 2" rule is meant to be interpreted (I think it means that exaggeration as extreme as 0.433:1 or 1.732:1 is acceptable), but I'm pretty sure this meets the requirement anyway.

SVG

<svg xmlns="http://www.w3.org/2000/svg" xmlns:l="http://www.w3.org/1999/xlink" viewBox="0 -5 26 26"><g id="a"><path d="m7,9H3V5h6z"/><g id="f"><path id="b" fill="red" d="m9,5H3V1h4z"/><path id="c" fill="blue" d="m3,1l2,4L3,9l-2-4z"/></g></g><use l:href="#a" x="3" y="6"/><use l:href="#e" x="12"/><g id="e"><use l:href="#a" x="-6" y="12"/><use l:href="#a" x="-12" y="12"/></g><use l:href="#a" x="-9" y="6"/><use l:href="#a" x="-6"/><use l:href="#a" x="-3" y="-6"/><use l:href="#f"/></svg>

Result

A PNG rendering of the above SVG code for Reutersvärd's Triangle

SVG, 562 540 520 504 487 473 bytes

This is my first time golfing SVG (or any markup, in fact); be gentle!

The assumed viewing environment is an SVG-capable web browser with anything like a typical window size. I tested it in Firefox 50 and in Chrome 55.

The viewBox is necessary to meet the 100-pixel requirement; blowing up all measurements by a suitable factor would also work but would take more bytes. Incidentally, it is possible to save another byte by removing the space in 0 -5 in the viewBox value, but Firefox won't accept this as valid (whereas Chrome will).

The aspect ratio is 1:1 instead of the true 0.866:1. I'm not sure exactly how the "factor of 2" rule is meant to be interpreted (I think it means that exaggeration as extreme as 0.433:1 or 1.732:1 is acceptable), but I'm pretty sure this meets the requirement anyway.

SVG

<svg xmlns="http://www.w3.org/2000/svg" xmlns:l="http://www.w3.org/1999/xlink" viewBox="0 -5 26 26"><g id="a"><path d="m7,9H3V5h6z"/><g id="f"><path fill="red" d="m9,5H3V1h4z"/><path fill="blue" d="m3,1l2,4L3,9l-2-4z"/></g></g><use l:href="#a" x="3" y="6"/><use l:href="#e" x="12"/><g id="e"><use l:href="#a" x="-6" y="12"/><use l:href="#a" x="-12" y="12"/></g><use l:href="#a" x="-9" y="6"/><use l:href="#a" x="-6"/><use l:href="#a" x="-3" y="-6"/><use l:href="#f"/></svg>

Result

A PNG rendering of the above SVG code for Reutersvärd's Triangle

Why did I bother with a style element?
Source Link
Tim Pederick
Tim Pederick
  • 1.7k
  • 14
  • 17

SVG, 562 540 520 504504 487 bytes

This is my first time golfing SVG (or any markup, in fact); be gentle!

The assumed viewing environment is an SVG-capable web browser with anything like a typical window size. I tested it in Firefox 50 and in Chrome 55.

The viewBox is necessary to meet the 100-pixel requirement (blowing up all measurements by a factor of 4 would also work but would take 8 more bytes, if I have counted correctly). Incidentally, it is possible to save another byte by removing the space in 0 -5 in the viewBox value, but Firefox won't accept this as valid (whereas Chrome will).

The aspect ratio is 1:1 instead of the true 0.866:1. I'm not sure exactly how the "factor of 2" rule is meant to be interpreted (I think it means that exaggeration as extreme as 0.433:1 or 1.732:1 is acceptable), but I'm pretty sure this meets the requirement anyway.

SVG

<svg xmlns="http://www.w3.org/2000/svg" xmlns:l="http://www.w3.org/1999/xlink" viewBox="0 -5 26 26"><style>#b{fill:red}#c{fill:blue}</style><g26"><g id="a"><path d="m7,9H3V5h6z"/><g id="f"><path id="b" fill="red" d="m9,5H3V1h4z"/><path id="c" fill="blue" d="m3,1l2,4L3,9l-2-4z"/></g></g><use l:href="#a" x="3" y="6"/><use l:href="#e" x="12"/><g id="e"><use l:href="#a" x="-6" y="12"/><use l:href="#a" x="-12" y="12"/></g><use l:href="#a" x="-9" y="6"/><use l:href="#a" x="-6"/><use l:href="#a" x="-3" y="-6"/><use l:href="#f"/></svg>

Result

A PNG rendering of the above SVG code for Reutersvärd's Triangle

SVG, 562 540 520 504 bytes

This is my first time golfing SVG (or any markup, in fact); be gentle!

The assumed viewing environment is an SVG-capable web browser with anything like a typical window size. I tested it in Firefox 50 and in Chrome 55.

The viewBox is necessary to meet the 100-pixel requirement (blowing up all measurements by a factor of 4 would also work but would take 8 more bytes, if I have counted correctly). Incidentally, it is possible to save another byte by removing the space in 0 -5 in the viewBox value, but Firefox won't accept this as valid (whereas Chrome will).

The aspect ratio is 1:1 instead of the true 0.866:1. I'm not sure exactly how the "factor of 2" rule is meant to be interpreted (I think it means that exaggeration as extreme as 0.433:1 or 1.732:1 is acceptable), but I'm pretty sure this meets the requirement anyway.

SVG

<svg xmlns="http://www.w3.org/2000/svg" xmlns:l="http://www.w3.org/1999/xlink" viewBox="0 -5 26 26"><style>#b{fill:red}#c{fill:blue}</style><g id="a"><path d="m7,9H3V5h6z"/><g id="f"><path id="b" d="m9,5H3V1h4z"/><path id="c" d="m3,1l2,4L3,9l-2-4z"/></g></g><use l:href="#a" x="3" y="6"/><use l:href="#e" x="12"/><g id="e"><use l:href="#a" x="-6" y="12"/><use l:href="#a" x="-12" y="12"/></g><use l:href="#a" x="-9" y="6"/><use l:href="#a" x="-6"/><use l:href="#a" x="-3" y="-6"/><use l:href="#f"/></svg>

Result

A PNG rendering of the above SVG code for Reutersvärd's Triangle

SVG, 562 540 520 504 487 bytes

This is my first time golfing SVG (or any markup, in fact); be gentle!

The assumed viewing environment is an SVG-capable web browser with anything like a typical window size. I tested it in Firefox 50 and in Chrome 55.

The viewBox is necessary to meet the 100-pixel requirement (blowing up all measurements by a factor of 4 would also work but would take 8 more bytes, if I have counted correctly). Incidentally, it is possible to save another byte by removing the space in 0 -5 in the viewBox value, but Firefox won't accept this as valid (whereas Chrome will).

The aspect ratio is 1:1 instead of the true 0.866:1. I'm not sure exactly how the "factor of 2" rule is meant to be interpreted (I think it means that exaggeration as extreme as 0.433:1 or 1.732:1 is acceptable), but I'm pretty sure this meets the requirement anyway.

SVG

<svg xmlns="http://www.w3.org/2000/svg" xmlns:l="http://www.w3.org/1999/xlink" viewBox="0 -5 26 26"><g id="a"><path d="m7,9H3V5h6z"/><g id="f"><path id="b" fill="red" d="m9,5H3V1h4z"/><path id="c" fill="blue" d="m3,1l2,4L3,9l-2-4z"/></g></g><use l:href="#a" x="3" y="6"/><use l:href="#e" x="12"/><g id="e"><use l:href="#a" x="-6" y="12"/><use l:href="#a" x="-12" y="12"/></g><use l:href="#a" x="-9" y="6"/><use l:href="#a" x="-6"/><use l:href="#a" x="-3" y="-6"/><use l:href="#f"/></svg>

Result

A PNG rendering of the above SVG code for Reutersvärd's Triangle

Wait, that's not what I meant...
Source Link
Tim Pederick
Tim Pederick
  • 1.7k
  • 14
  • 17

SVG, 562 540 520 504 bytes

This is my first time golfing SVG (or any XMLmarkup, in fact); be gentle!

The assumed viewing environment is an SVG-capable web browser with anything like a typical window size. I tested it in Firefox 50 and in Chrome 55.

The viewBox is necessary to meet the 100-pixel requirement (blowing up all measurements by a factor of 4 would also work but would take 8 more bytes, if I have counted correctly). Incidentally, it is possible to save another byte by removing the space in 0 -5 in the viewBox value, but Firefox won't accept this as valid (whereas Chrome will).

The aspect ratio is 1:1 instead of the true 0.866:1. I'm not sure exactly how the "factor of 2" rule is meant to be interpreted (I think it means that exaggeration as extreme as 0.5433:1 or 1.732:1 is acceptable), but I'm pretty sure this meets the requirement anyway.

SVG

<svg xmlns="http://www.w3.org/2000/svg" xmlns:l="http://www.w3.org/1999/xlink" viewBox="0 -5 26 26"><style>#b{fill:red}#c{fill:blue}</style><g id="a"><path d="m7,9H3V5h6z"/><g id="f"><path id="b" d="m9,5H3V1h4z"/><path id="c" d="m3,1l2,4L3,9l-2-4z"/></g></g><use l:href="#a" x="3" y="6"/><use l:href="#e" x="12"/><g id="e"><use l:href="#a" x="-6" y="12"/><use l:href="#a" x="-12" y="12"/></g><use l:href="#a" x="-9" y="6"/><use l:href="#a" x="-6"/><use l:href="#a" x="-3" y="-6"/><use l:href="#f"/></svg>

Result

A PNG rendering of the above SVG code for Reutersvärd's Triangle

SVG, 562 540 520 504 bytes

This is my first time golfing SVG (or any XML, in fact); be gentle!

The assumed viewing environment is an SVG-capable web browser with anything like a typical window size. I tested it in Firefox 50 and in Chrome 55.

The viewBox is necessary to meet the 100-pixel requirement (blowing up all measurements by a factor of 4 would also work but would take 8 more bytes, if I have counted correctly). Incidentally, it is possible to save another byte by removing the space in 0 -5 in the viewBox value, but Firefox won't accept this as valid (whereas Chrome will).

The aspect ratio is 1:1 instead of the true 0.866:1. I'm not sure exactly how the "factor of 2" rule is meant to be interpreted (I think it means that exaggeration as extreme as 0.5:1 is acceptable), but I'm pretty sure this meets the requirement anyway.

SVG

<svg xmlns="http://www.w3.org/2000/svg" xmlns:l="http://www.w3.org/1999/xlink" viewBox="0 -5 26 26"><style>#b{fill:red}#c{fill:blue}</style><g id="a"><path d="m7,9H3V5h6z"/><g id="f"><path id="b" d="m9,5H3V1h4z"/><path id="c" d="m3,1l2,4L3,9l-2-4z"/></g></g><use l:href="#a" x="3" y="6"/><use l:href="#e" x="12"/><g id="e"><use l:href="#a" x="-6" y="12"/><use l:href="#a" x="-12" y="12"/></g><use l:href="#a" x="-9" y="6"/><use l:href="#a" x="-6"/><use l:href="#a" x="-3" y="-6"/><use l:href="#f"/></svg>

Result

A PNG rendering of the above SVG code for Reutersvärd's Triangle

SVG, 562 540 520 504 bytes

This is my first time golfing SVG (or any markup, in fact); be gentle!

The assumed viewing environment is an SVG-capable web browser with anything like a typical window size. I tested it in Firefox 50 and in Chrome 55.

The viewBox is necessary to meet the 100-pixel requirement (blowing up all measurements by a factor of 4 would also work but would take 8 more bytes, if I have counted correctly). Incidentally, it is possible to save another byte by removing the space in 0 -5 in the viewBox value, but Firefox won't accept this as valid (whereas Chrome will).

The aspect ratio is 1:1 instead of the true 0.866:1. I'm not sure exactly how the "factor of 2" rule is meant to be interpreted (I think it means that exaggeration as extreme as 0.433:1 or 1.732:1 is acceptable), but I'm pretty sure this meets the requirement anyway.

SVG

<svg xmlns="http://www.w3.org/2000/svg" xmlns:l="http://www.w3.org/1999/xlink" viewBox="0 -5 26 26"><style>#b{fill:red}#c{fill:blue}</style><g id="a"><path d="m7,9H3V5h6z"/><g id="f"><path id="b" d="m9,5H3V1h4z"/><path id="c" d="m3,1l2,4L3,9l-2-4z"/></g></g><use l:href="#a" x="3" y="6"/><use l:href="#e" x="12"/><g id="e"><use l:href="#a" x="-6" y="12"/><use l:href="#a" x="-12" y="12"/></g><use l:href="#a" x="-9" y="6"/><use l:href="#a" x="-6"/><use l:href="#a" x="-3" y="-6"/><use l:href="#f"/></svg>

Result

A PNG rendering of the above SVG code for Reutersvärd's Triangle

Saved more bytes by changing the origin and the defining instance for use elements.
Source Link
Tim Pederick
Tim Pederick
  • 1.7k
  • 14
  • 17
Saved more bytes by using H/V path segments instead of L (hiding the "error" under other pieces) and with another g element.
Source Link
Tim Pederick
Tim Pederick
  • 1.7k
  • 14
  • 17
Removed excess whitespace and used absolute coordinates to save a few bytes here and there.
Source Link
Tim Pederick
Tim Pederick
  • 1.7k
  • 14
  • 17
Source Link
Tim Pederick
Tim Pederick
  • 1.7k
  • 14
  • 17