Pass localization into an svg image?

Question

Currently, I'm working on a multi-language project in React using i18next.

I have a few SVG images that contain a static text language. This is an example from one of the SVG images.

<text
  stroke="none"
  style="outline-style:none;"
  id="text4"
  stroke-width="1px"
  x="301.069519px"
  text-rendering="geometricPrecision"
  font-family="SinhalaSangamMN"
  fill="#000000"
  font-size="32px"
  y="263.101746px"
  transform=""
  text-anchor="middle"
>
  cieplna < ~~~~~~~~~~ text I want to change
</text>;

Is it possible to pass localization into the SVG file using the i18Next utility that I have been using in my React Components:

i18next.js

const checkLocale = (lng) => {
  return getLocale(lng);
}

export function init18n() {
  const i18nOpts = {
    lng: window.userLang,
    fallbackLng: 'it',
    debug: true,
  }
  return checkLocale(window.userLang).then(res => {
      if (res) {
        i18nOpts.backend = {
          loadPath: `${env.REACT_APP_API_URL}locales/{{lng}}/{{ns}}.json`,
          crossDomain: true,
        }
      }
      return init(i18nOpts);
  })
  .catch(err =>{
    return init(i18nOpts);
  })
}

React example: label={i18next.t( 'windows.MAIN_CARD.projectName' )}

If not, is this something I can do from local storage?

Local Storage window.localStorage.i18nextLng

In this Stack Overflow question Angular / svg - pass data into svg & in this blog post https://getlocalization.wordpress.com/2016/11/07/how-to-utilize-svg-in-localization/, it was demonstrated this was possible.

Not sure where to go from here, thanks in advance for any help.

Answer 1

Yes you can do it. In your component, starts by adding this at the beginning :

const { t, i18n } = useTranslation();

Then, instead of writing cieplna, write :

t('path.to.your.cielplna.translation')

The translation has to be stored in a json file.

Look at the react i18 next documentation, or the different examples that you can find, here for example. https://github.com/i18next/react-i18next/tree/master/example/react/src
The translations are stored in the public/locales folder.