How to Simplify SVG Code Using Basic Shapes

From Complex Paths to Basic Shapes: Writing Leaner SVGs

SVG is the best way to handle icons, whether you drop them inline or reference them as external files. They are drawn in code, which makes them flexible, scalable, and easy to work with across contexts. But that flexibility comes with a catch: icons exported from design tools often contain far more markup than they need.

An inline SVG with a heavy <path> data string makes your document longer, hurts readability, and adds unnecessary weight. You can work around this with code-level solutions—reusing markup with <use>, managing styles with native SVG variables, or pulling in SVGs from the server side with a language like PHP. But it is also worth attacking the problem at the file level. Redrawing figures with basic shapes like <line>, <circle>, and <rect> can drastically cut code bloat while keeping the visuals intact. The result: smaller, more maintainable, and more semantic icons without any quality loss.

The Drop-in Replacement: Two Lines Beat One Path

Consider a standard "close" or "cross" icon exported from a tool like Flaticon. Under the hood, it is a single <path> element that traces the border of the compound shape, which is the file-level equivalent of building the icon in Illustrator by drawing two lines, converting them to shapes, and merging them with the pathfinder. It works, but it is verbose.

The same visual output can be replicated with two <line> elements, which are far simpler to read and edit:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="50" height="50" overflow="visible" stroke="black" stroke-width="10" stroke-linecap="round">
   <line x1="0" y1="0" x2="50" y2="50" />
   <line x1="50" y1="0" x2="0" y2="50" />
</svg>

Start by defining a viewBox that goes from 0,0 to 50,50. You can choose any coordinate bounds you like, since the SVG will scale to whatever width and height you assign. Setting inline dimensions of 50 by 50 units avoids extra calculations while drawing. Each <line> only needs coordinates for its first and last points. The first line runs from x=0 y=0 to x=50 y=50:

<line x1="0" y1="0" x2="50" y2="50" />

The second line goes from x=50 y=0 to x=0 y=50:

<line x1="50" y1="0" x2="0" y2="50" />

SVG strokes have no color by default, so the stroke attribute is set to black. A stroke-width of 10 units and a stroke-linecap of round replicate the rounded corners of the original design. Adding these styles directly to the <svg> tag lets both lines inherit them automatically:

<svg ... stroke="black" stroke-width="10" stroke-linecap="round" ...>

Watch the cropping: an SVG stroke centered on the drawn line extends beyond its coordinates, so a wide stroke near the edge can get clipped by the viewBox. Either shift the line endpoints further inside the canvas, or add overflow=visible into the styles.

From there you can drop the redundant 0 values, since zero is the default for those attributes. What remains is remarkably compact:

<line x2="50" y2="50" />
<line x1="50" y2="50" />

Swapping a complex <path> for a couple of lines results in a smaller file and semantics that are much easier to adjust later.

Circle and Path: A Cleaner Clock Icon

Icons exported from illustration software often carry along XML instructions, editor namespaces, and licensing metadata that have nothing to do with the figure itself. All of that is safe to strip. For a clock icon that was originally traced entirely with <path>, the cleaner approach layers a <circle> for the face and a simple <path> for the hands.

Use a viewBox that goes from 0,0 to 100,100:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100" fill="none" stroke="black" stroke-width="10" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="50" cy="50" r="40"/>
  <path d="M50 25V50 H75" /> 
</svg>

Reuse the stroke styles from the icon above. Fill in SVG defaults to black, so you must explicitly set fill="none" for the circle; otherwise, the solid face will hide the hands entirely.

Drawing a <circle> calls for a center point (cx and cy) and a radius (r). Make the radius slightly smaller than the viewBox and adjust for a 10-unit stroke so nothing gets cropped at the edges.

The hands are a good case for the <path> element's simpler commands. In the d attribute, start with an M (move to) instruction at coordinates 50,25, just inside the top-center of the circle. The vertical command V takes a single positive value, which draws downward, while the horizontal instruction H moves the drawing to the right. Uppercase commands in SVG mean the coordinates map to absolute positions in the grid; lowercase variants would shift the drawing by relative units instead. The single-letter commands keep this readable and short compared to the export-style path data.

Rect and Polyline: An Envelope With Less Excess

An envelope icon may already contain basic shapes when exported from Illustrator, but it probably still has filler. Illustrator exports inline styles in a <style> block, and unless you tell it otherwise, it converts content to paths. Keeping shapes as shapes is the first useful choice. Running the output through a tool like SVGOMG helps strip comments, XML prolog directives, and empty elements:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 310 190" xml:space="preserve">
  <style>.st0{fill:none;stroke:#000;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10}
  </style><rect x="5" y="5" class="st0" width="300" height="180"/>
  <polyline class="st0" points="5 5 155 110 305 5"/>
</svg>

Several attributes can be removed by hand without affecting the look:

• version="1.1", since that attribute is deprecated in SVG 2
• id="Layer_1", which has no functional purpose
• x="0" and y="0", since zero is the default value
• xml:space="preserve", also deprecated since SVG 2

That yields a leaner markup, and you can migrate the remaining CSS into a stylesheet if you want full separation:

<svg xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 310 190">
  <style>.st0{fill:none;stroke:#000;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10}
  </style>
  <rect x="5" y="5" class="st0" width="300" height="180"/>
  <polyline class="st0" points="5 5 155 110 305 5"/>
</svg>

The <rect> needs coordinates for its top-left corner, a width, and a height. A useful starting point is x="5" and y="5", creating a rectangle that is 300 units wide and 180 units high. As with the earlier examples, off-setting the start point prevents a 10-unit stroke from clipping at the 0,0 corner.

<polyline> works like <line> but accepts any number of vertices. Each pair inside the points attribute defines an x and y coordinate, one pair after another. Commas make the sequence readable, but you can separate coordinates with whitespace and get an identical result.

Polygon and Ellipse: Two More Options

<polygon> behaves just like <polyline>, except that it always connects the final point back to the starting one to close the shape. And while the clock used a circle, swapping its single r attribute for both rx and ry produces an <ellipse> where horizontal and vertical extents can differ. Those two elements cover much of the remaining icon territory once you internalize the simpler shape syntax.

Key Takeaways for Lighter SVGs

• Compression starts in the drawing tool before the file ever hits your project.
• Run exports through a compressor like SVGOMG as a routine step.
• Strip editor-specific XML and metadata by hand where tools still leave it behind.
• Prefer basic shapes such as <line>, <rect>, <circle>, and <polygon> over heavy path data whenever the geometry allows.
• Use <use> to build a maintainable library and reuse icon code throughout a site.

These basic SVG primitives can be combined to build a broad set of simple, clean icons. Once you see past the exported path strings, reworking them is mostly a matter of adjusting a few numeric attributes. The result is code that is visually identical and considerably simpler to own.