SVG tips & tricks

1️⃣ SVG Elements Don’t Have a Background Color

Unlike HTML elements, SVG elements do not support background colors directly. They also do not support borders.

If you want to create a background or add a border to your SVG, you need to draw a rectangle that covers the desired area. CSS properties like background-color or fill or border on the SVG element itself are not recognized and will be ignored.

Example:

2️⃣ Text Alignment in SVG

Text alignment in SVG works differently compared to HTML. You can control both horizontal and vertical alignment using the text-anchor and alignment-baseline properties, which are unique to SVG.

Here’s a summary of how they work:

3️⃣ Grouping Elements with <g>

The <g> element in SVG is used to group multiple elements together.

This is especially useful for applying transformations, styles, or events to a collection of elements as a single unit.

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <g fill="none" stroke="black">
    <circle cx="50" cy="50" r="40" />
    <rect x="100" y="100" width="80" height="80" />
    <line x1="20" y1="20" x2="180" y2="180" />
  </g>
</svg>

4️⃣ Stroke, Fill, and Color: Different from HTML

In SVG, the concepts of stroke, fill, and color work differently than in standard HTML.

The fill property controls the interior color of shapes, while stroke affects the outline. Unlike div elements, SVG shapes don’t have separate properties for borders and backgrounds; instead, you use stroke and fill to control these aspects.

For text elements, avoid using stroke to outline text, as it can result in poor readability. Instead, focus on using fill for color and text-anchor for alignment.

5️⃣ Inheritance Rules

In HTML, styling generally doesn’t inherit by default (e.g., a color applied to a div doesn’t affect child elements unless they inherit it explicitly). In SVG, many properties do inherit by default, especially graphic-specific ones. For example, fill and stroke values applied to an SVG container g (group) element will cascade down to all children unless overridden. This makes grouping styles common in SVG.

6️⃣ Text Wrapping

In SVG, there is no built-in functionality for automatic text wrapping like you would find in HTML or CSS. 😱

You have to manage text wrapping manually or use JavaScript libraries to handle it.

This is very very annoying. In practice, we'll often use a HTML layer on top of the SVG layer to add text (like in tooltips) to make our life simpler.

7️⃣ SVG Dimensions: The Impact of “100%”

Setting SVG dimensions to "100%" can lead to unexpected results, especially in responsive designs. SVGs can scale based on their container, but how they scale depends on the viewBox and preserveAspectRatio attributes. Understanding these attributes is key to ensuring your SVGs display correctly across different screen sizes. For more details, refer to our module on responsiveness.

8️⃣ Filters, Blur Effects, and Gradients

SVG offers powerful capabilities for applying visual effects, such as filters and gradients. Filters like blur, drop-shadow, and grayscale can add depth and dimension to your graphics. Gradients allow for smooth transitions between colors, which can be applied to fills or strokes, adding richness to your visualizations.

9️⃣ Stacking Order Matters

In SVG, elements are rendered in the order they appear in the markup, creating a natural stacking order. This means that the order of elements in your SVG code affects their visual layering. Elements later in the code will appear on top of earlier ones, so careful planning is needed when layering elements to achieve the desired visual effect.

🔟 Dealing with Blurry SVG Elements

SVG elements can sometimes appear blurry, especially when scaled. This is often due to anti-aliasing, which can smooth edges but also cause them to lose sharpness. To fix this, you can use the shape-rendering="crispEdges" property to make edges appear sharper, especially for pixel-perfect designs.