How to Crop & Convert TGA to SVG: Step-by-Step Tutorial

By Bill Crawford  ·  March 2026  ·  5 min read  ·  Last updated March 13, 2026

Connect on LinkedIn →

Overview

This tutorial walks through every step of cropping a TGA image and converting it to an SVG file using the Data Conversion Center TGA to SVG Crop Converter. The output is a self-contained, standards-compliant SVG file that embeds the cropped region as a lossless PNG — pixel data is preserved exactly, including full alpha-channel transparency from 32-bit TGA sources. The SVG opens in all modern browsers and design tools including Adobe Illustrator, Inkscape, and Affinity Designer. The entire process takes under two minutes and your image never leaves your device.

Important note: This tool does not perform auto-tracing. TGA is a raster (pixel) format. The output SVG embeds the raster crop inside an SVG <image> element — it is not converted to vector paths. For true raster-to-vector conversion, use Illustrator's Image Trace or Inkscape's Trace Bitmap on the downloaded SVG.

Step 1: Open the Tool

Navigate to dataconversioncenter.com/image-tools/tga-to-svg-crop/ in any modern browser. The tool works in Chrome, Firefox, Edge, and Safari on both desktop and mobile. No sign-in, no extension, and no download required.

Step 2: Load Your TGA

You have two options for loading your source image:

• Drag and drop. Drag a TGA file (with a .tga extension) from your file manager directly onto the drop zone. The image loads the moment you release it.
• Browse. Click anywhere on the drop zone (or the "Browse Files" link) to open your operating system's file picker. Select your TGA and click Open.

The built-in TGA decoder handles uncompressed and RLE-compressed TGA files at 8, 16, 24, and 32 bits per pixel. As soon as decoding completes, the image appears in the source panel with the blue crop handles set to the full image boundary.

Step 3: Adjust the Crop Area

The crop overlay has eight handles: four at the corners and four at the midpoints of each edge:

• Corner handles (NW, NE, SW, SE). Drag to resize the crop in both dimensions simultaneously — the most common handle for free-form cropping.
• Edge handles (N, S, W, E). Drag to move only that edge, constraining the resize to a single axis. Use these to trim one side without affecting the opposite boundary.
• Interior pan. Click and drag anywhere inside the crop rectangle (not on a handle) to reposition the entire selection without changing its dimensions.

As you drag, the crop dimensions badge in the panel header updates in real time to show the output pixel dimensions at full TGA resolution. These dimensions become the SVG's width and height attributes, so they represent the intrinsic size of the output SVG. The info bar below the panel shows exact pixel coordinates.

Step 4: Preview the Crop

Before converting, click Preview Crop. A pop-up opens showing the cropped region at browser width, with the title displaying the exact output dimensions (e.g., "Crop Preview — 512 × 512 px"). Use this to verify:

• The composition is correct and no important detail is clipped.
• Any transparent areas from a 32-bit TGA appear correctly — the embedded PNG in the SVG output preserves full alpha transparency.
• The crop dimensions are appropriate for the SVG's intended use context (web component, design tool handoff, inline SVG, etc.).

Close the preview and adjust handles if needed before proceeding.

Step 5: Convert & Download the SVG

When you are satisfied with the crop, click Convert & Download SVG. The button briefly shows "⏳ Converting…" while the tool:

1. Draws the selected pixel region onto an off-screen canvas at full TGA resolution using drawImage with source rectangle parameters.
2. Calls canvas.toDataURL('image/png') to encode the crop as a lossless PNG and produce a base64 data URI.
3. Assembles a standards-compliant SVG string with the correct width, height, and viewBox attributes, and an <image> element referencing the PNG data URI via both href (modern) and xlink:href (legacy) for maximum compatibility.
4. Packages the SVG as a Blob and triggers a browser download named [original-filename]_crop.svg.

For a source file named sprite.tga, the output is sprite_crop.svg. No server round-trip occurs at any point.

Step 6: Use the SVG in Your Project

The downloaded SVG can be used in several ways:

• As an HTML image source. Use it directly with an <img> tag: <img src="sprite_crop.svg" alt="...">. It renders in all modern browsers and scales with CSS like any other image.
• As inline SVG in HTML. Open the SVG in a text editor, copy its contents, and paste directly into your HTML. This allows CSS and JavaScript interaction via the SVG DOM.
• In Adobe Illustrator or Inkscape. File → Open → select the SVG. The embedded raster appears as a placed image you can resize, rotate, and apply SVG effects to. For vector tracing, use Image Trace (Illustrator) or Trace Bitmap (Inkscape) as a separate step.
• In SVG-based workflows. Drop the SVG into any build pipeline, icon sprite generator, or component library that accepts SVG inputs.

Step 7: Start Over (Optional)

To crop and convert a different TGA, click ↺ Start Over. This clears the current image, resets the crop handles, and returns the tool to its initial drop zone state.

Tips for Best Results

• The output is raster-in-SVG, not vector. The pixel content is not automatically traced to vector paths. The SVG container is useful for SVG ecosystem integration, but the pixel data remains raster. For true vector conversion, use Illustrator's Image Trace or Inkscape's Trace Bitmap on the downloaded file.
• SVG files are larger than plain PNG. The base64 encoding adds approximately 33% overhead compared to a raw PNG file. If file size is the priority, use TGA to PNG Crop. Use SVG when the ecosystem integration justifies the modest size increase.
• Transparency is fully preserved. The embedded PNG supports a full alpha channel — any transparency from a 32-bit TGA is retained in the SVG output and renders correctly in all browsers.
• The SVG is self-contained. The PNG is embedded as a base64 data URI — there are no external file references. The SVG works as a single portable file.
• Watch the dimensions badge for exact sizing. The crop dimensions become the SVG's intrinsic width and height — these are the pixel dimensions the SVG renders at by default before CSS scaling is applied.
• TGA source stays untouched. The tool reads your TGA and produces the SVG without modifying the original file in any way.