Blog Ask AI Tools Videos QA Wiki Discord

← Back to tools

SVG to JSX Converter

An SVG to JSX tool converts SVG (Scalable Vector Graphics) formatted data into JSX (JavaScript XML) format, enabling easy transformation and representation of SVG data in a more human-readable and structured JSX syntax.

Use Ctrl + k + "Tools" to quickly access all tools.

Input

<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="512" height="512" fill="black"/>
<path d="M40.49 246.074V231.064H68.456C74.0387 231.064 78.3573 229.642 81.412 226.798C84.572 223.849 86.152 219.793 86.152 214.632C86.152 209.997 84.6247 206.1 81.57 202.94C78.5153 199.78 74.1967 198.2 68.614 198.2H40.49V182.4H69.404C76.356 182.4 82.4653 183.822 87.732 186.666C92.9987 189.405 97.054 193.197 99.898 198.042C102.847 202.782 104.322 208.207 104.322 214.316C104.322 220.741 102.847 226.324 99.898 231.064C97.054 235.804 92.9987 239.491 87.732 242.124C82.4653 244.757 76.356 246.074 69.404 246.074H40.49ZM28.008 293V182.4H46.178V293H28.008ZM88.68 293L49.97 244.968L66.876 238.806L111.59 293H88.68ZM148.184 294.58C141.338 294.58 135.123 292.842 129.54 289.366C124.063 285.89 119.692 281.203 116.426 275.304C113.266 269.3 111.686 262.611 111.686 255.238C111.686 247.759 113.266 241.071 116.426 235.172C119.692 229.168 124.063 224.428 129.54 220.952C135.123 217.371 141.338 215.58 148.184 215.58C153.978 215.58 159.086 216.844 163.51 219.372C168.04 221.795 171.621 225.165 174.254 229.484C176.888 233.803 178.204 238.701 178.204 244.178V265.982C178.204 271.459 176.888 276.357 174.254 280.676C171.726 284.995 168.198 288.418 163.668 290.946C159.139 293.369 153.978 294.58 148.184 294.58ZM151.028 278.148C157.454 278.148 162.615 275.989 166.512 271.67C170.515 267.351 172.516 261.821 172.516 255.08C172.516 250.551 171.621 246.548 169.83 243.072C168.04 239.596 165.512 236.91 162.246 235.014C159.086 233.013 155.347 232.012 151.028 232.012C146.815 232.012 143.076 233.013 139.81 235.014C136.65 236.91 134.122 239.596 132.226 243.072C130.436 246.548 129.54 250.551 129.54 255.08C129.54 259.609 130.436 263.612 132.226 267.088C134.122 270.564 136.65 273.303 139.81 275.304C143.076 277.2 146.815 278.148 151.028 278.148ZM171.41 293V272.618L174.412 254.132L171.41 235.804V217.16H188.79V293H171.41ZM228.619 293.79L196.229 217.16H215.347L237.467 273.408H231.937L255.321 217.16H274.597L239.363 293.79H228.619ZM206.025 324.6L229.567 276.094L239.363 293.79L225.301 324.6H206.025ZM280.104 293V217.16H297.484V293H280.104ZM297.484 250.814L291.48 247.812C291.48 238.227 293.587 230.485 297.8 224.586C302.119 218.582 308.597 215.58 317.234 215.58C321.026 215.58 324.45 216.265 327.504 217.634C330.559 219.003 333.403 221.215 336.036 224.27L324.66 235.962C323.291 234.487 321.764 233.434 320.078 232.802C318.393 232.17 316.444 231.854 314.232 231.854C309.387 231.854 305.384 233.381 302.224 236.436C299.064 239.491 297.484 244.283 297.484 250.814ZM371.622 294.58C365.197 294.58 359.456 293.158 354.4 290.314C349.45 287.47 345.552 283.573 342.708 278.622C339.97 273.566 338.6 267.773 338.6 261.242V217.16H355.98V260.452C355.98 264.139 356.56 267.299 357.718 269.932C358.982 272.46 360.773 274.409 363.09 275.778C365.513 277.147 368.357 277.832 371.622 277.832C376.678 277.832 380.523 276.357 383.156 273.408C385.895 270.353 387.264 266.035 387.264 260.452V217.16H404.644V261.242C404.644 267.878 403.222 273.724 400.378 278.78C397.64 283.731 393.795 287.628 388.844 290.472C383.894 293.211 378.153 294.58 371.622 294.58ZM470.151 293V249.234C470.151 244.178 468.519 240.017 465.253 236.752C462.093 233.487 457.985 231.854 452.929 231.854C449.559 231.854 446.557 232.591 443.923 234.066C441.29 235.541 439.236 237.595 437.761 240.228C436.287 242.861 435.549 245.863 435.549 249.234L428.755 245.442C428.755 239.649 430.019 234.54 432.547 230.116C435.075 225.587 438.551 222.058 442.975 219.53C447.505 216.897 452.561 215.58 458.143 215.58C463.831 215.58 468.887 217.055 473.311 220.004C477.735 222.848 481.211 226.587 483.739 231.222C486.267 235.751 487.531 240.491 487.531 245.442V293H470.151ZM418.169 293V217.16H435.549V293H418.169Z" fill="url(#paint0_linear_40_2)"/>
<defs>
<linearGradient id="paint0_linear_40_2" x1="29.5" y1="182" x2="488" y2="293" gradientUnits="userSpaceOnUse">
<stop stop-color="#5423E7"/>
<stop offset="0.208333" stop-color="#563FB3"/>
<stop offset="0.541667" stop-color="#EF4444"/>
<stop offset="0.770833" stop-color="#EA6E15"/>
<stop offset="1" stop-color="#F7D738"/>
</linearGradient>
</defs>
</svg>

Output

Feedback or suggestions? Send it to luc@ray.run

Thank you!

Was this helpful?

Open Source Packages

Install with https://npmjs.com/:

@svgr/core

Related Tools

Blog Ask AI Tools Videos QA Wiki Discord

About Questions Discord Forum Browser Extension Tags QA Jobs

Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email luc@ray.run.