Controlling font size in SVG

Controlling font size in SVG
Controlling font size in SVG

Controlling font size in SVG can be achieved using various methods, including attributes, CSS, or inline styles. Here’s how you can adjust and control the font size in SVG effectively:

1. Using the font-size Attribute

The font-size attribute directly sets the size of the text in SVG.

  • Example:
&lt;svg xmlns="<a href="http://www.w3.org/2000/svg" target="_blank" rel="nofollow">click here</a>" width="300" height="100"&gt;

&lt;text x="10" y="50" font-size="20"&gt;Hello, SVG!&lt;/text&gt;
&lt;/svg&gt;

2. Using Inline Styles

You can use the style attribute to apply font-size to the text.

  • Example:
&lt;svg xmlns="<a href="http://www.w3.org/2000/svg" target="_blank" rel="nofollow">click here</a>" width="300" height="100"&gt;

&lt;text x="10" y="50" style="font-size:20px;"&gt;Hello, SVG!&lt;/text&gt;
&lt;/svg&gt;

3. Using CSS

If your SVG is inline, you can apply a class or id to the <text> element and control the font size via CSS.

  • Example:
&lt;svg xmlns="<a href="http://www.w3.org/2000/svg" target="_blank" rel="nofollow">click here</a>" width="300" height="100"&gt;

&lt;text x="10" y="50" class="my-text"&gt;Hello, SVG!&lt;/text&gt;
&lt;/svg&gt;
&lt;style&gt;
.my-text {
font-size: 24px;
}
&lt;/style&gt;

4. Using CSS with External Stylesheets

For external or embedded stylesheets, you can target SVG elements like any other HTML elements.

  • Example:
&lt;svg xmlns="<a href="http://www.w3.org/2000/svg" target="_blank" rel="nofollow">click here</a>" width="300" height="100"&gt;

&lt;text x="10" y="50" id="greeting"&gt;Hello, SVG!&lt;/text&gt;
&lt;/svg&gt;
&lt;style&gt;
#greeting {
font-size: 18px;
}
&lt;/style&gt;

5. Relative Font Sizes (em or %)

SVG supports relative font sizes like em, %, or rem. This can be useful for responsive designs.

  • Example:
&lt;svg xmlns="<a href="http://www.w3.org/2000/svg" target="_blank" rel="nofollow">click here</a>" width="300" height="100"&gt;

&lt;text x="10" y="50" style="font-size:150%;"&gt;Hello, SVG!&lt;/text&gt;
&lt;/svg&gt;

6. Using viewBox and Scaling for Responsiveness

If your SVG uses a viewBox, font sizes scale along with the rest of the SVG. However, this behavior depends on how you define the font-size.

  • Example:
&lt;svg xmlns="<a href="http://www.w3.org/2000/svg" target="_blank" rel="nofollow">click here</a>" viewBox="0 0 300 100" width="100%"&gt;

&lt;text x="10" y="50" font-size="10"&gt;Hello, SVG!&lt;/text&gt;
&lt;/svg&gt;

  • Tip: If you don’t want the text to scale, use em or % for font-size and set a fixed container width.

7. Using JavaScript to Dynamically Change Font Size

JavaScript can dynamically adjust the font size in SVG.

  • Example:
&lt;svg xmlns="<a href="http://www.w3.org/2000/svg" target="_blank" rel="nofollow">click here</a>" width="300" height="100" id="mySvg"&gt;

&lt;text x="10" y="50" id="dynamicText"&gt;Hello, SVG!&lt;/text&gt;
&lt;/svg&gt;
&lt;script&gt;
document.getElementById("dynamicText").setAttribute("font-size", "30");
&lt;/script&gt;

Common Tips

1. Inheritance: If font-size is applied to a parent <g> or <svg>, child <text> elements inherit it unless overridden.

&lt;svg xmlns="<a href="http://www.w3.org/2000/svg" target="_blank" rel="nofollow">click here</a>" font-size="16"&gt;

&lt;text x="10" y="20"&gt;Inherited Font Size&lt;/text&gt;
&lt;/svg&gt;

2. Units:

  • Use px for fixed font sizes.
  • Use em, %, or rem for scalable or responsive designs.

3. Combining Techniques: Combine CSS, JavaScript, and inline attributes for advanced control.

By using these techniques, you can control and adapt SVG text sizes to suit your design and functionality needs.

svg