How to create an SVG file
There are four ways to make an SVG. Choose one based on what you are starting from:
| Starting from | Method | Result |
|---|---|---|
| Nothing, an idea or a sketch | Draw in a vector editor | Clean, editable shapes |
| Simple geometry you can describe | Write the code | The smallest possible file |
| A design in Figma, Illustrator or Inkscape | Export as SVG | Your existing artwork as SVG |
| A PNG or JPG | Trace it | An approximation in vector shapes |
Method 1: Draw it in a free online editor
- Open the online SVG editor. A blank 800 × 600 artboard opens. Change the size in the Properties panel, or pick a preset such as Icon 24 or Social 1200×630.
- Draw basic shapes with the rectangle tool (M) and its neighbours in the toolbar: ellipse, polygon and star.
- Draw custom outlines with the pen tool (P): click to place corner points, drag to create curves, and click the first point to close the shape.
- Combine shapes with Object → Pathfinder: Unite, Minus Front, Intersect or Exclude.
- Add text with the type tool (T), and set fills, strokes and gradients from the top bar.
- Name your layers. Vectopea writes layer names as element
ids, which is handy for CSS and animation. - Choose File → Export SVG.
Method 2: Write the SVG code
An SVG file is plain text. Save this as badge.svg and open it in a browser:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="45" fill="#7c4dff"/>
<path d="M30 52 L45 66 L72 36" fill="none" stroke="#fff" stroke-width="8"
stroke-linecap="round" stroke-linejoin="round"/>
</svg>
The parts that matter
xmlnsis required for standalone.svgfiles.viewBox="0 0 100 100"defines a 100-unit coordinate system that scales to any size.- Shapes:
<rect>,<circle>,<ellipse>,<line>,<polygon>, and<path>for anything else.
Use the SVG code editor to see a live preview while you type, then open the result in the visual editor to refine it.
Method 3: Export from a design tool
| Tool | How to export SVG |
|---|---|
| Figma | Select a frame or layer → Export panel → choose SVG → Export |
| Adobe Illustrator | File → Export → Export As → SVG |
| Inkscape | File → Save As → Plain SVG or Optimized SVG |
| Vectopea | File → Export SVG (readable) or Export Minified SVG |
Exported files often contain editor metadata. Run them through the SVG optimizer before putting them on a website.
Method 4: Trace a PNG or JPG
Tracing converts pixels into vector outlines. It works well for logos, icons and high-contrast artwork, and poorly for photographs.
- Open the image in Inkscape and choose Path → Trace Bitmap.
- Pick single-scan (one colour) or multi-scan (several colours) and adjust the threshold until the preview looks right.
- Delete the original bitmap, then clean up the traced paths in any vector editor. Vectopea's direct selection tool (A) makes it easy to delete stray points.
Don't just embed the image
Some converters put your PNG inside an <image> tag and call the result an SVG. It won't scale sharply and can't be edited as shapes. Open the file in the SVG viewer: if the markup contains <image href="data:image/png…, it isn't a real vector.
Check your SVG before using it
- Open it in the SVG viewer to confirm the size and viewBox.
- Crop it if there's empty space around the artwork.
- Export a PNG version for places that don't accept SVG, such as email or social media.