SVG code basics
Use the same vector in markup, components, or CSS
An SVG file is already XML-based markup. The useful conversion is adapting that markup to the syntax and delivery method your project expects.
Inline HTML leaves the SVG available to CSS and JavaScript. JSX adapts attributes to React conventions, while typed TSX adds reusable SVG props for classes, dimensions, labels, and handlers.
A Data URI percent-encodes SVG into one string for CSS or controlled configuration fields. It avoids a file request but can be harder to read and cache independently.
Four outputs
Choose code that matches the consuming system
Each tab starts from the same validated SVG but applies a different wrapper or attribute convention.
Inline HTML
Use the SVG element in an HTML template, CMS block, documentation page, or framework that accepts ordinary markup. The unnecessary XML declaration is removed.
JSX markup
Use JSX inside a React component. The converter maps class, kebab-case SVG attributes, namespace attributes, and inline CSS to React-compatible syntax.
React TSX component
Use a named function with SVGProps<SVGSVGElement>. Root props let the parent supply classes, size, color, labels, focus behavior, and handlers.
Percent-encoded Data URI
Use a one-line value in CSS or configuration. Angle brackets, hashes, spaces, and other sensitive characters are percent encoded.
Developer workflow
Convert, inspect, and integrate
The tool generates deterministic output, but the developer still owns how the asset behaves inside the product.
1. Add one trusted source
Drop a file or paste SVG markup. Malformed XML, scripts, events, DTD declarations, external resources, and foreignObject content are blocked.
2. Compare output tabs
Check the preview, then switch among HTML, JSX, React TSX, and Data URI. The code updates without a conversion API.
3. Copy or download
Copy the output or download its matching file. Run your formatter and project checks after adding it to the codebase.
Accessible SVG
Decide whether the graphic is decorative or meaningful
Conversion preserves existing labels; it cannot determine the role the image plays in your interface.
Meaningful graphics need a name
Provide a concise accessible name when the SVG communicates information that is not already available in nearby text.
Decorative graphics should stay quiet
When an icon repeats visible text or adds no meaning, hide it from assistive technology instead of inventing a redundant label.
Interactive SVG needs product logic
Attach interaction through your application, then verify keyboard focus, target size, state, and accessible instructions.
Responsive styling
Keep viewBox and control size from the outside
A useful inline SVG usually scales through layout styles while its internal coordinate system remains stable.
Preserve the viewBox
The viewBox defines internal drawing space and proportional scaling. Keep it when a component must adapt to different CSS sizes.
Use currentColor deliberately
currentColor can let icons inherit text color, while multicolor artwork may need explicit tokens or separate props.
Let component props compose
The React output spreads caller props on the root for className, size, role, aria attributes, and handlers.
Conversion boundaries
Generated syntax is a starting point, not a design-system decision
The converter preserves tested SVG structure and values while making syntax changes required by the selected output.
Project conventions vary
Your codebase may prefer default exports, forwardRef, memo, wrappers, tokenized colors, or specific filenames. Adjust the function accordingly.
Complex CSS deserves review
Inline declarations become a React style object. Check embedded styles, animation, and advanced selectors in the final build.
Separate files can still be better
Keep a standalone file when caching, CDN delivery, editorial replacement, or smaller JavaScript matters more than DOM styling.
Local processing
Source markup never needs to leave the tab
Validation, parsing, transformation, preview URLs, clipboard output, and downloads use browser-local APIs.
No upload or account history
GlyPho does not send the SVG or generated code to a server, storage bucket, conversion queue, private library, or analytics content field.
Temporary preview lifecycle
The local Blob preview is revoked when the input is replaced, the tool is cleared, or the component is disposed. Download URLs are revoked immediately after use.
Implementation questions
Common SVG to code choices
These answers cover attribute mapping, component naming, Data URIs, and the cases where no conversion is necessary.
Why does JSX use different attributes?
React follows DOM property-style names for many HTML and SVG props, including className and strokeWidth. Aria and data attributes intentionally keep their hyphens.
How is the component named?
The file base name is converted to PascalCase. A file named brand-mark.svg becomes BrandMark.tsx and exports a BrandMark function.
Can I use the Data URI in an img element?
Yes when the consuming field permits data URLs, though a normal file URL is often easier to cache, inspect, secure, and replace.
Do I need JSX for every SVG?
No. Use a separate image file when you do not need DOM-level styling, animation, accessibility composition, or component props.
Related SVG workflows
Prepare or create the source before integration
Compress a production asset, generate a new editable vector, or create an icon before converting the final SVG into application code.