select SVG element's attribute "id" in React - reactjs

How I can select the SVG element's "g" attribute "id" : as mentioned below "SvgElement" in react
like :
<svg id="L_1" data-name="L 1" xmlns="http://www.w3.org/2000/svg" width="1920" height="720" viewBox="0 0 920 420">
<rect id="Background" width="1920" height="720" fill="none"/>
<g id="SvgElement">
<circle cx="200" cy="100" r="50"/>
</g>
</svg>

Related

can't get the SVG to my react component getting an error

I'm trying to add a SVG file but I'm getting an error tat says:
Compiled with problems:X
ERROR
[eslint]
src/svg/banner.jsx
Line 15:2: Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? (15:2)
this is the svg:
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<circle
cx="50"
cy="50"
r="40"
stroke="blue"
fill="lightblue"
/>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="1921.641"
height="170.5"
viewBox="0 0 1921.641 170.5"
>
<defs>
<linearGradient
id="linear-gradient"
x1="-0.038"
y1="-1.902"
x2="1.1"
y2="2.41"
gradientUnits="objectBoundingBox"
>
<stop offset="0" stop-color="#4040be" />
<stop offset="0.36" stop-color="#4e67eb" />
<stop offset="1" stop-color="#31c3ac" />
</linearGradient>
</defs>
<path
id="Path_30"
data-name="Path 30"
d="M0,0H1921.641V170.5H0Z"
opacity="0.8"
fill="url(#linear-gradient)"
/>
</svg>
I'm trying to import it like this:
import { ReactComponent as Logo } from "../svg/banner.svg";
I've also tried to import it like this:
import banner from "../svg/banner.svg";
but it isn't working... any ideas?
using react and chakra UI

create js file export individual SVG data import file inside {} brace and inside importing an SVG file return SVG looks like
//This is my allsvg.js file
export const calender = <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-calendar" viewBox="0 0 16 16">
<path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z" />
</svg>
//This is where i will import svg file
import { calender } = require("./Media/AllSvg");
return (<div>{calender}</div>)

If you want set the SVG as a react component, you should return one element. ( You can use react Fragment for that <> /* ...HTML code */ </>)
export default function Svg() {
return (
<>
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<circle
cx="50"
cy="50"
r="40"
stroke="blue"
fill="lightblue"
/>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="1921.641"
height="170.5"
viewBox="0 0 1921.641 170.5"
>
<defs>
<linearGradient
id="linear-gradient"
x1="-0.038"
y1="-1.902"
x2="1.1"
y2="2.41"
gradientUnits="objectBoundingBox"
>
<stop offset="0" stop-color="#4040be" />
<stop offset="0.36" stop-color="#4e67eb" />
<stop offset="1" stop-color="#31c3ac" />
</linearGradient>
</defs>
<path
id="Path_30"
data-name="Path 30"
d="M0,0H1921.641V170.5H0Z"
opacity="0.8"
fill="url(#linear-gradient)"
/>
</svg>
</>
)
}

JSX elements must be wrapped in an enclosing tag But Your component it's not wrapped . You can use Fragments to group all your svg tags without adding nodes to the DOM try it like this :
<> // shorter syntax you can use for declaring fragments
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<circle
cx="50"
cy="50"
r="40"
stroke="blue"
fill="lightblue"
/>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="1921.641"
height="170.5"
viewBox="0 0 1921.641 170.5"
>
<defs>
<linearGradient
id="linear-gradient"
x1="-0.038"
y1="-1.902"
x2="1.1"
y2="2.41"
gradientUnits="objectBoundingBox"
>
<stop offset="0" stop-color="#4040be" />
<stop offset="0.36" stop-color="#4e67eb" />
<stop offset="1" stop-color="#31c3ac" />
</linearGradient>
</defs>
<path
id="Path_30"
data-name="Path 30"
d="M0,0H1921.641V170.5H0Z"
opacity="0.8"
fill="url(#linear-gradient)"
/>
</svg>
</>

SVG icon doesn`t load

Some svg icons in my project are displayed and some dont. Heres an example of one that has issue
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" id="windows">
<defs>
<linearGradient id="windows_svg__b" x1="0%" x2="100%" y1="0%" y2="100%">
<stop offset="0%" stop-color="#FFF" stop-opacity="0.1"></stop>
<stop offset="100%" stop-color="#0087C7"></stop>
</linearGradient>
<path id="windows_svg__a"
d="M6.5 14.62l-5.656-.892A1 1 0 010 12.74V8.288h6.5v6.333zm1 .159V8.288H16v6.662a1 1 0 01-1.156.988L7.5 14.778zm-1-13.367v5.876H0V3.241a1 1 0 01.853-.989l5.647-.84zm1-.148L14.853.17A1 1 0 0116 1.16v6.128H7.5V1.264z">
</path>
</defs>
<g fill="none" fill-rule="evenodd">
<use fill="#0087C7" xlink:href="#windows_svg__a"></use>
<use fill="url(#windows_svg__b)" fill-opacity="0.8" xlink:href="#windows_svg__a"></use>
</g>
</svg>
https://codesandbox.io/s/practical-satoshi-o68rnt
I guess that`s something with tags but not sure and have no idea how to fix it

There are 2 issues with your code first issue is with your SVG have some issues please use the below one.
`<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" id="windows">
<defs>
<linearGradient id="windows_svg__b" x1="0%" x2="100%" y1="0%" y2="100%">
<stop offset="0%" stop-color="#FFF" stop-opacity="0.1"></stop>
<stop offset="100%" stop-color="#0087C7"></stop>
</linearGradient>
<path id="windows_svg__a"
d="M6.5 14.62l-5.656-.892A1 1 0 010 12.74V8.288h6.5v6.333zm1 .159V8.288H16v6.662a1 1 0 01-1.156.988L7.5 14.778zm-1-13.367v5.876H0V3.241a1 1 0 01.853-.989l5.647-.84zm1-.148L14.853.17A1 1 0 0116 1.16v6.128H7.5V1.264z">
</path>
</defs>
<g fill="none" fill-rule="evenodd">
<use fill="#0087C7" href="#windows_svg__a"></use>
<use fill="url(#windows_svg__b)" fill-opacity="0.8" href="#windows_svg__a"></use>
</g>
</svg>`
Second, you have to import that image first, and then you can use it in your code.
import "./styles.css";
import icon from"../public/icons/icon.svg";
export default function App() {
return (
<div className="App">
<img src={icon} alt="sorry" />
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
</div>
);
}

Try to use
import { ReactComponent as Icon } from "path/icon.svg";
And then you can use it as component in React
<div>
<Icon />
</div>

How to generate an svg image from multiple small svg components?

I have the below svg component. I want to stack multiple same svg components horizontally and vertically, to generate a bigger svg image in a grid.
I can stack them together but how do I convert it to an svg?
Please suggest, and if there is any package I can use. Thanks.
SVG Component
import React from "react";
import "./styles.css";
export default function MySVG() {
return (
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink" width="40" height="40" viewBox="0 0 40 40">
<defs/>
<g/>
<g transform="scale(1,1)">
<g transform="scale(1,1)">
<rect id="cell" fill="rgb(16,28,138)" stroke="none" x="0" y="0" width="40" height="40" fill-opacity="0.40784313725490196"/>
</g>
<path fill="none" stroke="rgb(163,127,18)" paint-order="fill stroke markers" d=" M 0 0 L 0 40" stroke-opacity="0.7294117647058823" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/>
<path fill="none" stroke="rgb(163,127,18)" paint-order="fill stroke markers" d=" M 40 0 L 40 40" stroke-opacity="0.7294117647058823" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/>
<path fill="none" stroke="rgb(163,127,18)" paint-order="fill stroke markers" d=" M 0 0 L 40 0" stroke-opacity="0.7294117647058823" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/>
<path fill="none" stroke="rgb(163,127,18)" paint-order="fill stroke markers" d=" M 0 40 L 40 40" stroke-opacity="0.7294117647058823" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/>
</g>
</svg>
);
}
App Component
import React from "react";
import MySVG from "./MySVG";
import "./styles.css";
export default function App() {
return [...Array(5).keys()].map((i) => <MySVG key={i} />);
}
CodeSandBox Link

How to make SVG element clickable?

Angular 1.6
I want to make the following SVG element clickable:
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 30.2 34.1"
style="enable-background:new 0 0 30.2 34.1;" xml:space="preserve">
<rect x="19.4" y="0" width="10.8" height="5.4"/>
<rect x="19.4" y="14.3" width="10.8" height="5.4"/>
<rect x="19.4" y="28.7" width="10.8" height="5.4"/>
<rect x="0.2" y="0" width="10.8" height="5.4"/>
<rect x="0.2" y="14.3" width="10.8" height="5.4"/>
<rect x="0.2" y="28.7" width="10.8" height="5.4"/>
</svg>
If not Angular it works by simply enclosing it like this <svg>...</svg>. But the svg graphics simply dissapears if I do the same in Angular.
Also I tried <use> with no success:
<svg ...>
<use xlink:href="" ng-attr-xlink:href="{{$ctrl.menu.channels}}" />
...
</svg>
How to make my svg element clickable attaching a link to it?

Your first approach was OK, you just need a bit of additional CSS:
<a href="#" class="svg">
<svg version="1.1" id="Layer_1">...</svg>
</a>
And in your css:
a.svg:after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}

SVG clipping mask disappear when changing angular states (Safari / Chrome)

I'm making a logo out of an SVG. Below is the code I am using to construct that logo. It works well and good, with three stacked rectangles and a clipping mask I define.
What is super strange is that whenever I change states in my angular app the clipping mask disappears and I am left with just the rectangles. In Chrome the clipping mask disappears when I zoom also.
Any input appreciated.
<svg style="display:none;" class="gp-ui">
<defs>
<g id="gp_logo-text">
<g class="gp_logo-global">
<path fill="#fff" d="M568.7,485.5c4.6,19.3,23.5,28.5,41.7,28.5c12.9,0,24.8-4.2,34.1-13.5c10-10.2,10.9-20.8,10.9-34.5v-58.2h11.3v-19h-29.6v13c-6.5-10.3-17.3-14.5-29.1-14.5c-24.2,0-44.3,21.3-44.3,45.8c0,24.8,19.3,46,44.1,46c11.8,0,21.7-4.5,27.9-14.8v3.3c0,8.4-0.5,14-6,20.7c-4.4,5.2-11.6,8.2-18.5,8.2c-7.7,0-16.2-3.5-19.6-11L568.7,485.5L568.7,485.5L568.7,485.5z M584.2,433c0-14.8,11.9-27,26.5-27c14.5,0,26.6,12,26.6,26.8c0,15-11.4,27.5-26.5,27.5C596,460.4,584.2,448.2,584.2,433L584.2,433z" />
<polygon fill="#fff" points="694.6,358.8 663.5,358.8 663.5,377.8 674.7,377.8 674.7,458.9 662.6,458.9 662.6,477.9 705.9,477.9 705.9,458.9 694.6,458.9 " />
<path fill="#fff" d="M749.9,480.2c25.6,0,45.9-21.3,45.9-47.4c0-25.3-20.3-46.7-45.4-46.7c-25.3,0-46.1,20.8-46.1,46.9C704.3,458.7,724.4,480.2,749.9,480.2L749.9,480.2z M749.9,460.2c-14.9,0-26-12.7-26-27.4c0-14.8,12.1-26.7,26.5-26.7c14.5,0,25.8,12.7,25.8,27.2C776.1,448.2,764.4,460.2,749.9,460.2L749.9,460.2z" />
<path fill="#fff" d="M824.5,358.8h-31.2v19h11.3v81h-11.3v19h31.2v-13.3c6.7,9.7,17.6,14.7,29.2,14.7c11.4,0,23.2-5.8,30.9-14.5c7.7-8.5,11.8-19.8,11.8-31.3c0-25.2-20.3-45.9-44.9-45.9c-11.1,0-20.7,4.8-26.9,14.2L824.5,358.8L824.5,358.8L824.5,358.8zM850.1,406c14.5,0,26.4,12.2,26.4,27c0,14.5-11.3,27.3-26,27.3c-15,0-26.9-12-26.9-27.5C823.7,418,835.6,406,850.1,406L850.1,406z" />
<path fill="#fff" d="M973.1,477.9h31.2v-19h-10.9v-51h10.9v-19h-31.2v12.7c-6-9.7-15.8-15-27.1-15c-25.5,0-45.7,21.5-45.7,47.4c0,25.2,19.8,46.3,44.8,46.3c11.4,0,21.7-4.5,28.1-14.3L973.1,477.9L973.1,477.9z M946.8,460.4c-14.1,0-26-12-26-26.5c0-15,11.4-27.5,26.3-27.5c14.4,0,26.3,11.8,26.3,26.5C973.4,448,961.8,460.4,946.8,460.4L946.8,460.4z" />
<polygon fill="#fff" points="1040.9,358.8 1009.7,358.8 1009.7,377.8 1020.9,377.8 1020.9,458.9 1008.8,458.9 1008.8,477.9 1052.1,477.9 1052.1,458.9 1040.9,458.9 " />
</g>
<g class="gp_logo-post">
<path fill="#E62100" d="M1072.2,491.4h-11.1v19h42.5v-19h-11.3v-26c7,9.3,18.1,13.8,29.6,13.8c24.2,0,43.4-21.2,43.4-45.5c0-25.2-19.8-45.9-44.4-45.9c-11.8,0-22.2,4.8-28.6,15v-14h-31.2v19h11.1L1072.2,491.4L1072.2,491.4L1072.2,491.4z M1118.4,460.4c-14.5,0-26.3-12-26.3-26.8c0-15.3,12.1-27,26.8-27c14.5,0,25.8,12.7,25.8,27.2C1144.7,448.4,1132.8,460.4,1118.4,460.4L1118.4,460.4z" />
<path fill="#E62100" d="M1213.7,480.2c25.7,0,45.9-21.3,45.9-47.4c0-25.3-20.2-46.7-45.4-46.7c-25.3,0-46.1,20.8-46.1,46.9C1168.1,458.7,1188.2,480.2,1213.7,480.2L1213.7,480.2z M1213.7,460.2c-14.9,0-26-12.7-26-27.4c0-14.8,12.1-26.7,26.5-26.7c14.5,0,25.8,12.7,25.8,27.2C1240,448.2,1228.2,460.2,1213.7,460.2L1213.7,460.2z" />
<path fill="#E62100" d="M1263.3,452v25.8h15.2v-7.3c5.7,6.8,13.7,9.7,22.5,9.7c16.3,0,31.2-10,31.2-28c0-20-16.8-25-32.5-28.7c-6.4-1.5-14.4-3.3-14.4-11.7c0-6.2,5.7-9.3,11.1-9.3c6.2,0,11,4.2,11.3,10.5h19.3v-24.2h-14.7v6.2c-4.9-6.3-11.9-8-19.8-8c-15.5,0-29.6,9.8-29.6,26.8c0,19.5,16.7,24.4,31.8,28.4c6.7,1.8,14.9,3.3,14.9,12.2c0,6.7-5.9,11-11.9,11c-8.2,0-13.4-5.3-14.1-13.3L1263.3,452L1263.3,452L1263.3,452z" />
<polygon fill="#E62100" points="1368.3,407.8 1383.2,407.8 1383.2,388.8 1368.3,388.8 1368.3,358.8 1348.4,358.8 1348.4,388.8 1334.7,388.8 1334.7,407.8 1348.4,407.8 1348.4,477.9 1384.2,477.9 1384.2,458.9 1368.3,458.9 " />
</g>
</g>
<path id="gp_logo-swoosh-path" d="M565.9,316v21c64.4-24.4,147.2-39.3,237.5-39.2c90.2,0,173,14.8,237.5,39.2v-21
c-66-23.9-148.2-38-237.5-38C714.1,278,631.9,292.1,565.9,316" />
</defs>
</svg>
<svg id="globalpost_logo" width="100%" height="100%" viewBox="563.8 277.9 820.4 236.1" xml:space="preserve">
<g id="gp_logo-swoosh" ng-class="{'gp_logo-loading': uiCtrl.loadingState}" clip-path="url(#gp_logo-clip-path)">
<clipPath id="gp_logo-clip-path" >
<use xlink:href="#gp_logo-swoosh-path" />
</clipPath>
<g id="gp_logo-swoosh">
<rect id="gp_logo-swoosh-lead-rect" class="active" x="565.9" y="277.9" fill=" rgba(69, 125, 222, 0)" width="1em" height="59" />
<rect id="gp_logo-swoosh-fill-rect" x="565.9" y="277.9" fill=" rgba(69, 125, 222, 0)" width="1em" height="59" />
<rect id="gp_logo-swoosh-full-rect" x="565.9" y="277.9" fill=" rgba(69, 125, 222, 1)" width="1em" height="59" />
</g>
</g>
<use xlink:href="#gp_logo-text" />
</svg>

Resources