Hacker News Reader

Comment by ygra | Hacker News Reader

Actually I'd use SVG for that, it's even trivial to write:

    <svg width='20' height='10'>
      <path fill='#D94948' d='M0,20h20L10,0'/>
    </svg>

Should be supported pretty much everywhere canvas is, but without the need of scripting to actually get a triangle.

View on HN

But that's hardly reusable. You'll have to copypaste the (completely nonobvious) markup everywhere you want a triangle. Although it might be possible to use the CSS :before pseudo-element...

More obvious if you use a polygon rather than a path object:

  <svg height=10 width=20>
      <polygon fill=red stroke-width=0 
         points="0,10 20,10 10,0" />
  </svg>

And you can put it in your CSS using a data URI:

  .triangle {
      background: url("data:image/svg+xml;charset=utf-8,<svg height='10' width='20' xmlns='http://www.w3.org/2000/svg'><polygon fill='red' stroke-width='0' points='0,10 20,10 10,0' /></svg>") no-repeat left center;
      width: 20px;
      height: 10px;
  }

I'm more comfortable with the path syntax, and polygons are pretty much the same as a path, except that you would prepend M and append z to the list of points (for certain buggy renderers it might be necessary to put an L inside, too). Paths have handy shorthands for horizontal, vertical and relative movement, though.

If you're more comfortable with it, that's great. To someone who's not already comfortable with it, points="0,10 20,10 10,0" is a lot more obvious than d='M0,20h20L10,0'

If you're still within HTML, is

  <img src='triangle.svg'>

really that much harder than

  <div class='triangle'></div>?

SVG has `symbol` and `use` for reusing stuff: http://www.w3.org/TR/SVG/struct.html#SymbolElement

I can't stand the w3 docs sometimes. After reading that section about `symbol`, I still have no clue what it is or how to use it.

What exactly don't you understand? I find the W3C specs fairly well-written, actually.

You declare a symbol in the defs section of an SVG image and you can instantiate it with use. E.g.

  <svg>
    <defs>
      <symbol id='foo'>
        <circle r='5' cx='10' cy='3'/>
      </symbol>
    </defs>
    <use xlink:href='#foo' x='2' y='5'/>
    <use xlink:href='#foo' x='10' y='10' fill='red' stroke='blue'/>
  </svg>

(does not actually work, because namespaces are missing and the symbol likely is missing things like a viewbox, but just to get the general idea across)

Reply on news.ycombinator.com