Currently I am writing a generator based on React and SVG using mechanic.design (a JS framework). This generator has different input possibilities which are declared by different fields.

Now I have the following problem and that is I have a text field and when it gets too long it leaves my ViewBox and doesn't make a line break. I've read online that a line break is not supported in SVG but I'm curious if it can be done in a roundabout way using React.

Manually setting line breaks is something I've seen done with static text, but the generator creates dynamic text with different lengths, so I can't set breaks manually.

Below some code for the visual part:

import React, { useEffect, useState } from "react";
import ImgBanner from './assets/banner.svg';
import "./styles.css";

export const handler = ({ inputs, mechanic }) => {
  const {
    width,
    height,
    schriftfarbe,
    subtitel,
    titel,
    titel2,
    untertitel,
  } = inputs;

  useEffect(() => {
    mechanic.done();
  }, []);

return (
    <svg width={width} height={height}>
      <rect width={width} height={height} />
        <image href={ImgBanner} width={width} height={height} />
        <image
          x={950}
          y={-10}
          width={200}
          height={200}
          href={href}
        >
        </image>
        {/* The text */}

        <text
          x={25}
          y={75}
          fill={schriftfarbe}
          textAnchor="start"
          fontWeight="regular"
          fontFamily="Garnett Regular"
          fontSize={30}
        >
          {subtitel}
        </text>
        
        <text
          x={25}
          y={height / 2}
          fill={schriftfarbe}
          textAnchor="start"
          fontWeight="regular"
          fontFamily="Garnett Regular"
          fontSize={72}
        >
          {titel}
          <tspan>
            
          </tspan>
        </text>

        <text
          x={25}
          y={height / 2 + 90}
          fill={schriftfarbe}
          textAnchor="start"
          fontWeight="regular"
          fontFamily="Garnett Regular"
          fontSize={72}
        >
          {titel2}
        </text>

        <text
          x={25}
          y={575}
          fill={schriftfarbe}
          textAnchor="start"
          fontWeight="regular"
          fontFamily="Garnett Regular"
          fontSize={30}
        >
          {untertitel}
        </text>
    </svg>
  );
};

Thanks in advance!