DevForge

SVG to SwiftUI

SwiftUI's Path has no equivalent of the SVG elliptical arc, so any icon drawn with A commands has to be rewritten as cubic curves before it can be expressed at all. That conversion happens here. A single-colour icon becomes a Shape you can tint with foregroundStyle; a multi-colour one becomes a View layering one Shape per paint.

svg
swiftui
options
target
preview

Paste or drop an SVG to preview it.

Technical Guide & Mechanics

Native Vector Path Synthesis for iOS & macOS in SwiftUI

SwiftUI's Path architecture does not natively support SVG's elliptical arc command (A). As a result, standard icons drawn with arcs cannot be pasted into Xcode without converting the arc geometry into cubic Bezier curve approximations.

Our engine mathematically evaluates elliptical arcs, converting them into smooth cubic Bezier curves (addCurve(to:control1:control2:)). Single-color icons are emitted as native Shape structs, allowing you to style them effortlessly with .fill(), .foregroundStyle(), and dynamic iOS system colors.

For multi-color vectors, the generator constructs a composable View that stacks individual color shapes together while maintaining original proportions.

how to use it

  1. 01Paste SVG markup or drop an .svg file.
  2. 02Name the shape.
  3. 03Copy the Swift into your project.

questions

Why a Shape sometimes and a View other times?
A SwiftUI Shape carries a single fill, so it can only represent a one-colour icon. Anything with several colours needs a View stacking one Shape per paint.
What happened to my arcs?
They were converted to cubic Beziers, which is the only way to express them in SwiftUI. The curve is visually identical.
How do I change its colour?
For a Shape, apply foregroundStyle at the call site. A generated View carries its colours internally.
Can I animate the generated Shape?
Yes, standard SwiftUI animatable modifiers like trim(from:to:) and scaleEffect apply seamlessly.

related