stroking_cosmetic.svg

Enable keyboard shortcuts

<svg viewBox="0 0 500 240">

  <!-- cosmetic -->

  <path

    vector-effect="non-scaling-stroke"

    transform="scale(4, 1)"

    d="M10,20 L40,100 L39,200 z"

    stroke="black"

    stroke-width="2px"

    fill="none"></path>

  <text x="50" y="225">cosmetic 2px, scaled</text>

  <!-- scaled -->

  <path

    transform="translate(100,0) scale(4,1)"

    d="M10,20 L40,100 L39,200 z"

    stroke="black"

    stroke-width="2px"

    fill="none"></path>

  <text x="200" y="225">2px, scaled</text>

  <!-- normal -->

  <path

    transform="translate(300, 0)"

    d="M10,20 L40,100 L39,200 z"

    stroke="black"

    stroke-width="2px"

    fill="none"></path>

  <text x="315" y="225">2px, normal</text>

</svg>