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:

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="100">
    <text x="10" y="50" font-size="20">Hello, SVG!</text>
  </svg>

2. Using Inline Styles

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

  • Example:

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="100">
    <text x="10" y="50" style="font-size:20px;">Hello, SVG!</text>
  </svg>

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:

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="100">
    <text x="10" y="50" class="my-text">Hello, SVG!</text>
  </svg>

  <style>
    .my-text {
      font-size: 24px;
    }
  </style>

4. Using CSS with External Stylesheets

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

  • Example:

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="100">
    <text x="10" y="50" id="greeting">Hello, SVG!</text>
  </svg>

  <style>
    #greeting {
      font-size: 18px;
    }
  </style>

5. Relative Font Sizes (em or %)

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

  • Example:

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="100">
    <text x="10" y="50" style="font-size:150%;">Hello, SVG!</text>
  </svg>

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:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 100" width="100%">
    <text x="10" y="50" font-size="10">Hello, SVG!</text>
  </svg>

  • 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:

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="100" id="mySvg">
    <text x="10" y="50" id="dynamicText">Hello, SVG!</text>
  </svg>

  <script>
    document.getElementById("dynamicText").setAttribute("font-size", "30");
  </script>

Common Tips

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

<svg xmlns="http://www.w3.org/2000/svg" font-size="16">
     <text x="10" y="20">Inherited Font Size</text>
   </svg>

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