Rendering Namespace Tags/Attributes Like xmlns:inkscape In React

Hi folks, React has been developing and becoming more powerful day by day. Major big companies like Facebook, Airbnb, Netflix etc… has shifted to React because it is easy to use and faster.

In this article we are going to see that how you can render some attributes that react does not support(throws error if you use it in normal html).

<svg
        xmlns:dc="http://purl.org/dc/elements/1.1/"
        xmlns:cc="http://creativecommons.org/ns#"
        xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
        xmlns:svg="http://www.w3.org/2000/svg"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
        xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
        version="1.1"
        x="0px"
        y="0px"
        viewBox="0 0 100 125"
      >
        <g transform="translate(0,-952.36218)">
          <path
            style={{
              fontSize: 'medium',
              fontStyle: 'normal',
              fontVariant: 'normal',
              fontWeight: 'normal',
              fontStretch: 'normal',
              textIndent: '0',
              textAlign: 'start',
              textDecoration: 'none',
              lineHeight: 'normal',
              letterSpacing: 'normal',
              wordSpacing: 'normal',
              textTransform: 'none',
              direction: 'ltr',
              blockProgression: 'tb',
              writingMode: 'lr-tb',
              textAnchor: 'start',
              baselineShift: 'baseline',
              opacity: '1',
              color: '#fff',
              fill: '#fff',
              fillOpacity: '1',
              fillRule: 'nonzero',
              stroke: 'none',
              strokeWidth: '4',
              marker: 'none',
              visibility: 'visible',
              display: 'inline',
              overflow: 'visible',
              enableBackground: 'accumulate',
              fontFamily: 'Sans',
              InkscapeFontSpecification:
                'Sans" d="M 67.90625 25.96875 A 2.0002 2.0002 0 0 0 66.65625 29.46875 L 86.84375 48 L 8 48 L 7.8125 48 C 6.7651593 48.049 5.8571564 49.04635 5.90625 50.09375 C 5.955344 51.14105 6.9526789 52.0493 8 52 L 86.84375 52 L 66.65625 70.5 A 2.0022756 2.0022756 0 1 0 69.34375 73.46875 L 93.34375 51.46875 A 2.0002 2.0002 0 0 0 93.34375 48.5 L 69.34375 26.5 A 2.0002 2.0002 0 0 0 67.90625 25.96875 z " transform="translate(0,952.36218)',
            }}
          />
    </g>
</svg>

In react when you try to add this above svg tag it will throw you an error shown as

Namespace tags are not supported by default. React’s JSX doesn’t support namespace tags. You can set `throwIfNamespace: false` to bypass this warning.

We can fix this issue by two ways shown as below

1. Adding the namespace tags the way react supports like for xmlns:xlink you can use xmlnsXlink.
2. Creating a json object of the namespace attributes and passing it to the tags

Now let us look in detail on the above two points.

1. Adding the namespace tags the way react supports like for xmlns:xlink you can use xmlnsXlink.

<svg 
  xmlns:svg="http://www.w3.org/2000/svg"
  xmlns:dc="http://purl.org/dc/elements/1.1/" />

instead of the above syntax you can write the below syntax

<svg 
  xmlnsSvg="http://www.w3.org/2000/svg"
  xmlnsDc="http://purl.org/dc/elements/1.1/"/>

So if you compare both the tags the change that you will see is xmlns:svg is changed to xmlnsSvg so we removed the : symbol from there and changed the first letter to capital after the : symbol word.

The problem with this type is there might be some namespace tags specially the svg tags that won’t support these types as well at that type we need to render the same way we do in html and to do that let’s jump on to the 2nd type of rendering the namespace attribute tags

2.Creating a json object of the namespace attributes and passing it to the tags

const attributeElements={
  "xmlns:dc":"http://purl.org/dc/elements/1.1/",
  "xmlns:cc":"http://creativecommons.org/ns#",
  "xmlns:rdf":"http://www.w3.org/1999/02/22-rdf-syntax-ns#"
  "xmlns:svg":"http://www.w3.org/2000/svg"
  "xmlns:inkscape":"http://www.inkscape.org/namespaces/inkscape"
}
<svg {...attributeElements} />

Now if you see the above code we are now using the normal html namespace tags so this will render in react the same way it is done in html. This is a very simple way to implement and avoid the namespace tags errors and there is no 3rd party library required this is basic variable declaration.

Finally, these were the two ways through which you can render namespace tags in your react projects. I hope you find this helpful.