svg2jsx.com

JSX is a syntax extension for JavaScript that lets you describe UI with markup that looks like HTML. It is not HTML and it is not a string — it compiles into regular JavaScript function calls, usually React.createElement(...), which produce the element objects React uses to build the DOM. You should use JSX when you write React components and want the structure of your UI to stay readable next to the logic that drives it.

JSX compiles to function calls

When you write:

const element = <h1 className="title">Hello</h1>;

A compiler (Babel, or the automatic JSX runtime in modern React) turns it into something like:

const element = React.createElement("h1", { className: "title" }, "Hello");

At runtime there is no HTML parsing step. React.createElement returns a plain object describing the element — its type, props, and children. React reads that object tree and reconciles it against the real DOM. This is why JSX expressions are values: you can assign them to variables, return them from functions, pass them as props, and store them in arrays.

With the newer automatic runtime, you no longer need React in scope just to use JSX, but the compiled output still creates element objects the same way.

Key syntax differences from HTML

JSX looks like HTML but follows JavaScript rules. The differences that trip people up most often:

Attribute names are camelCase because they map to DOM property names, not HTML attribute names. The style prop is a special case: it expects a JavaScript object with camelCase CSS properties.

Embedding expressions with curly braces

Curly braces switch from markup into JavaScript:

const name = "Ada";
const element = <p>Hello, {name}!</p>;

Anything that evaluates to a value can go inside the braces — variables, function calls, arithmetic, ternaries. You cannot put statements like if or for inside braces, only expressions. That constraint is why conditional rendering and lists use expressions rather than blocks.

Conditional rendering

Because JSX is expression-based, you branch with operators instead of if statements:

{isLoggedIn ? <Dashboard /> : <Login />}
{error && <ErrorMessage text={error} />}

The && pattern renders the right side only when the left side is truthy. Watch out for numbers: {count && <Badge />} renders 0 when count is 0, because 0 is falsy but still a valid React child. Use {count > 0 && <Badge />} to avoid that.

Lists and keys

Render arrays of elements with .map():

<ul>
  {items.map((item) => (
    <li key={item.id}>{item.name}</li>
  ))}
</ul>

The key prop gives each element a stable identity so React can match items between renders. Use a value that is unique and stable — an ID from your data is ideal. Array indices work only when the list never reorders, inserts, or deletes, because index keys cause React to reuse the wrong DOM nodes and can produce stale state or visual glitches.

Fragments

A component can return only one root element. To return several siblings without adding a wrapper <div>, use a fragment:

return (
  <>
    <Header />
    <Main />
  </>
);

The short syntax <>...</> is shorthand for <React.Fragment>. Use the long form when you need to pass a key to the fragment itself.

Common pitfalls

• Adjacent elements without a wrapper. return <A /><B />; is invalid — wrap them in a fragment or a parent element.
• Reserved words as props. class, for, and similar names must become className, htmlFor, and so on.
• Unclosed tags. <br>, <img>, and <input> must be self-closed as <br />, <img />, <input />.
• Missing React import in older setups. Before the automatic runtime, every file using JSX needed import React from "react";. If you see "React is not defined," that import is likely missing.
• Comments. Inside JSX, use {/* comment */} — plain // or /* */ will render as text or break parsing.

Where JSX fits with SVG

JSX is not limited to HTML elements. You can write SVG directly in JSX, and the same camelCase rule applies to SVG attributes — for example stroke-width becomes strokeWidth and fill-rule becomes fillRule. Tools like svg2jsx.com exist specifically to convert raw SVG markup into valid JSX, handling those attribute renames and self-closing tags for you. That is useful when you copy an icon from a design tool and want to paste it straight into a component.

Once you internalize that JSX is JavaScript that produces element objects, the rules stop feeling arbitrary: camelCase attributes, expression-only braces, and single-root returns all follow from the fact that you are writing function calls, not markup.

Paste or drop your SVG into a converter such as svg2jsx.com, then copy the JSX output straight into your React component. That works for most icons and simple illustrations. You only need to hand-fix the result if your SVG uses attributes JSX rejects, or if it relies on external references the converter can't inline.

What the converter actually does

An SVG file is XML. JSX looks similar but follows JavaScript rules, so a raw SVG pasted into a component often fails to compile. The conversion is mostly mechanical:

• Attribute names: class → className, and kebab-case attributes become camelCase (stroke-width → strokeWidth, fill-rule → fillRule).
• Namespaced attributes: xlink:href becomes xlinkHref (or just href in modern React).
• Self-closing tags: empty elements like <path> must be closed as <path />.
• Style strings: inline style="fill:red" becomes an object, style={{ fill: 'red' }}.
• Comments and metadata: XML declarations, <?xml ...?>, and editor comments are stripped.

The svg2jsx.com editor presents an Input SVG panel and a JSX Output panel, with a Star on Settings control and a file drop area labeled "Drag and drop your file here" plus an "Upload your file" option. You supply the SVG on one side and read the converted JSX on the other.

Step-by-step conversion

1. Get your SVG. Export it from your design tool, or copy the markup from an .svg file opened in a text editor. Make sure it's the raw SVG source, not a PNG or a screenshot.
2. Load it into the converter. Either drag and drop the file onto the drop zone, use the upload control, or paste the SVG markup into the Input SVG panel.
3. Read the JSX Output panel. The tool rewrites the attributes and returns JSX-ready markup.
4. Copy the output and paste it into your component file, inside the return of a function component or directly into your JSX tree.
5. Verify it compiles. Run your build or dev server. A clean compile means the attribute conversion succeeded.

A minimal result looks like this:

const Icon = () => (
  <svg viewBox="0 0 24 24" width="24" height="24" fill="none">
    <path d="M12 2 L2 22 L22 22 Z" fill="currentColor" />
  </svg>
);

export default Icon;

Checking the output before you ship it

Converters handle the common cases, but scan the result for these before committing:

• Leftover kebab-case attributes. Any stroke-width, fill-rule, clip-path still in hyphen form will throw a React warning or error.
• Unclosed tags. Every <path>, <circle>, <rect>, <line> needs a trailing />.
• class still present. It should be className everywhere.
• style as a string. It must be an object with camelCase keys.
• xmlns and xmlns:xlink. Usually harmless to keep, but xmlns:xlink should become xmlnsXlink if you keep it.

Common problems and fixes

The icon renders at the wrong size or is cropped. The viewBox is missing or doesn't match the artwork. Add viewBox="0 0 minX minY width height" from the original SVG's root element. Without a viewBox, scaling behaves unpredictably.

Paths look broken or distorted. Some design tools export transforms (transform="translate(...) scale(...)") that interact badly with how you position the SVG. Either keep the transform attribute as-is (JSX accepts it) or flatten it in your design tool before export.

Nothing shows up at all. Check fill. If the original used fill="none" on the root and relied on child fills, confirm those survived. Also confirm the SVG isn't relying on an external stylesheet or a <use> reference to a symbol defined elsewhere — those don't travel with a copy-paste.

The converter output has xlink:href. Replace it with href. React supports href on <use> and <image> in current versions, and xlinkHref is the fallback for older setups.

Colors are hardcoded and you want them themeable. After conversion, swap literal fills for currentColor so the icon inherits your text color, or pass a fill prop through the component.

When to convert by hand instead

For a single small icon, editing the SVG directly in your component is often faster than a round trip through a tool — the changes are the same handful of attribute renames. Use the converter when you have several files, when the SVG is long enough that manual editing invites mistakes, or when you want a quick sanity check on which attributes need rewriting. Either way, the compile step is your real test: if React builds without warnings, the JSX is valid.

SVG (Scalable Vector Graphics) is an XML-based vector image format: instead of storing a grid of pixels, an SVG file stores shapes, paths, text, and colors as markup that a renderer draws on demand. That means it scales to any size without pixelation, and it can be opened in a browser, edited as code, or edited visually in a vector editor such as Inkscape. Choose SVG when you need crisp scaling, small file sizes for geometric artwork, or images that must be styled and scripted on the web; choose a raster format like PNG or JPEG when the image is photographic or made of fine continuous tone.

What "XML-based vector" actually means

An SVG is a text document. A circle is not a cluster of colored pixels — it is an element with a center and a radius, and the renderer computes the pixels at whatever size you ask for.

This has three practical consequences:

• Resolution independence. The same file renders sharply as a 16 px favicon or a billboard. There is no "native resolution" to exceed.
• Small files for the right content. A logo made of a few curves can be a few kilobytes, while the equivalent PNG at high resolution may be far larger. The reverse is also true: a complex illustration with thousands of paths can be heavier than a compressed photo.
• Editable structure. Because the file is markup, you can change a color, move a shape, or add an animation by editing text or using a tool — no repainting required.

SVG vs. raster formats (PNG, JPEG)

A useful rule: if the image is built from distinct shapes and lines, SVG is usually the better container. If it is built from millions of subtly varying colors, raster is usually better.

How to open and view an SVG file

You rarely need special software just to look at one.

• Web browser. Drag the file into a browser window, or open it directly. Browsers render SVG natively. This is the fastest way to check that a file displays correctly.
• Image viewer. Many desktop viewers open SVG, though support varies; some rasterize it at a fixed size, which can hide scaling problems.
• Vector editor. Opening in a tool like Inkscape shows the actual objects, layers, and paths rather than just the rendered result. This is what you want if you intend to change anything.
• Text editor. Since SVG is XML, a plain text editor opens it and shows the underlying structure. Useful for small fixes and for understanding what a file contains.

How to edit an SVG file

There are two complementary ways to edit, and knowing which to use saves time.

Editing visually in a vector editor

Use this when you are changing appearance: moving objects, recoloring, reshaping paths, adjusting text, or combining elements. Inkscape is a professional vector graphics application for Linux, macOS, and Windows that works directly with SVG as its native document format, so what you draw is what the file contains. The general workflow is:

1. Open the SVG in the editor.
2. Select and transform objects, or use path tools to reshape curves.
3. Adjust fills, strokes, and text as needed.
4. Save back to SVG.

Because SVG is the editor's native format, round-tripping generally preserves the structure rather than flattening it.

Editing the XML directly

Use this when you need a precise or programmatic change: setting an exact coordinate, changing a single fill value, removing metadata, or generating files from a script. Open the file in a text editor, locate the relevant element, change the attribute, and save. The expected result is an immediate change in how the file renders — but a malformed tag will break rendering entirely, so keep a backup and validate after editing.

A practical division of labor: do structural and visual work in a vector tool, and reserve hand-editing for surgical changes or automation.

Common uses and pitfalls to check

SVG is the standard choice for:

• Icons and UI elements on websites and in applications.
• Logos and brand marks that must stay sharp across sizes.
• Illustrations and diagrams built from shapes and lines.
• Charts and data graphics that need to scale or be styled dynamically.
• Text-bearing graphics, since text stays as text.

Pitfalls worth checking before you ship a file:

• Text that depends on fonts. If a font is not available where the SVG is displayed, text may reflow or substitute. Converting critical text to paths removes that dependency but also removes selectability and editability.
• Embedded raster images. An SVG can contain a raster image inside it. The file is still SVG, but that part will not scale cleanly — check whether the artwork is genuinely vector.
• Unoptimized editor output. Tools often write extra metadata, unused definitions, and verbose coordinates. Cleaning these up can shrink the file substantially.
• External references. Some SVGs point to external resources; if those are missing, parts of the image may not render.
• Viewport and viewBox settings. These control how the artwork maps to the display area. A mismatch is a common cause of unexpected cropping or scaling.

If you want to inspect or fix any of these, opening the file in a text editor alongside a visual editor gives you both views of the same document.