Category:SVG simplification by linecapping

Often it is possible to draw circle structures with the stroke-linecap=round attribute, or rectangular ones with stroke-linecap=square.[clarification needed]

Examples how to draw a circle

Yellow disk with black border

There are different possibilities to draw a simple bordered circle as shown with this example.

  1. Bad solution: Very complicated drawing with cubic arcs (not a true trigonometric circle !)[clarification needed]
  2. conventional: <circle fill="#FEDE58" stroke="#000" stroke-width="10.5" x="175" cy="175" r="154"/>
    or in relatives:<circle fill="#FEDE58" stroke="#000" stroke-width="3%" cx="50%" cy="50%" r="44%"/>
  3. with linecapping: needs two paths,
    outside border <path d="m175,175h0" stroke-width="318.5" stroke-linecap="round" stroke="#000"/>
    and inside disk <path d="m175,175h0" stroke-width="298.5" stroke-linecap="round" stroke="#FEDE58"/>[clarification needed]
  4. with the "a" element[clarification needed]: as a true circle
    <path fill="#FEDE58" stroke="#000" stroke-width="10.5" d="m175,21a154,154 0 1,0 0,308 154,154 0 1,0 0-308"/>
or shortened (not a true trigonometric circle – but for most cases the small flat interval won't matter)
<path fill="#FEDE58" stroke="#000" stroke-width="10.5" d="m174,21a154,154 0 1,0 2,0z"/>

While the shortened version of (4) will be the best solution for simple drawings, linecapping as in (3) can be an advantage, esp. when used with the stroke-dasharray attribute.
Needless to say that a mere disk without the border becomes simpler.

Category:SVG simplification techniques#%20L

Pages in category "Category:SVG simplification by linecapping"

Category:Hidden categories Category:SVG simplification techniques