On this page
1. Open a simple SVG logo in Inkscape #
Use Inkscape and choose File → Open. Load your logo, or save the following original example as workshop-mark.svg and open it. You should see a blue rounded tile with a white path inside it.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" width="160" height="160">
<rect x="16" y="16" width="128" height="128" rx="24" fill="#1754b8"/>
<path d="M44 104V56H60V88H76V56H92V88H108V56H124V104Z" fill="#ffffff"/>
</svg>The canvas is 160 by 160 units, with space around the colored tile. The small document makes each selection and color change easy to recognize.
Save a working copy before changing the supplied artwork. Name it workshop-mark-master.svg so the editable source is separate from the later delivery copy.
2. Select the part you want to change #
Use the Selector tool and click the blue tile. Its selection handles should surround that object, while the white shape remains separate.
If a supplied logo selects as one group, use Object → Ungroup to reach its parts. Stop when you can select the intended shape. Some designs contain nested groups, and ungrouping every level can make a complicated document harder to manage.
The official guides to the Selector tool and grouped objects cover those controls. Check what you've selected before changing a color. A background rectangle selected by accident can make the whole design appear to change.
If the file contains one bitmap image instead of vector shapes, changing nodes won't redraw the logo. Ask for the vector source or use an image editor for that raster file.
3. Change the fill without adding an outline #
Choose Object → Fill and Stroke, or press Shift+Ctrl+F. In the Fill tab, choose a solid color. In RGBA, enter 0f766eff: the teal color #0f766e followed by ff for full opacity. Leave the white path alone.
The official Fill and Stroke guide distinguishes Fill, Stroke paint and Stroke style. A fill colors the inside of an object. A stroke adds a line around its edge. The custom-color guide explains the final two RGBA digits.
Check the tile at full size and at a small preview size. You should still see the white mark clearly. Keep Opacity at full opacity for this example and avoid adding blur; neither is needed for a crisp logo.
If you want a palette before choosing the final fill, our color-palette shortlist covers tools for exploring combinations.
4. Preserve the layout while making size changes #
Select the intended objects together before resizing the artwork. In the Selector controls, use the aspect-ratio lock when changing W or H. That keeps a square mark square instead of stretching it.
For the worked example, you don't need to change the document dimensions. The SVG's viewBox already allows it to scale. A website can display the same artwork at different sizes without creating a new path for each one.
Check File → Document Properties if the canvas has too much space around the artwork or parts fall outside the page. The workspace guide explains the page controls. Cropping the page too closely can cut off an outline or effect.
Make the design decision at its real display size. A decorative gap that looks generous on a large canvas may close up in a small navigation logo.
5. Save an editing master and a Plain SVG copy #
Use File → Save As to save the working document as Inkscape SVG. Then save a separate sharing copy as Plain SVG, with a filename such as workshop-mark-web.svg.
The saving documentation explains the difference: Inkscape SVG keeps editor-specific information; Plain SVG is intended for sharing with other SVG applications. Both use the .svg extension, so the filename helps identify their jobs.
After saving the web copy, return to the master for future editing. That keeps the richer editing document from being replaced accidentally by a simplified sharing version.
Save beside the source assets if the supplied document contains linked images. A file that depends on something outside the project folder is harder to hand off reliably.
6. Check the saved copy in a browser #
Open the Plain SVG file in a browser and compare it with the editor view. Look for the right color, complete shapes and expected space around the mark.
Then inspect it against the website's light and dark backgrounds. The sample's outside area is transparent; its white path remains white. Those are different decisions. A white logo without a colored tile may disappear on a white page.
If the SVG needs a code review, a code editor can show its elements and external references. For a raster sharing copy, Squoosh handles compression after you've exported a PNG through Inkscape's documented export workflow.
Reported problems to watch for #
In a June 2026 Inkscape discussion about moving computers, missing fonts changed existing designs. Replies advised checking the font-family value and installing the original font. Keep live text in the master; if fixed lettering must travel independently of fonts, make a delivery copy with text converted through Path → Object to Path.
A November 2025 thread about disappearing text raised the same problem at export. The replies pointed to text outlines for a destination without the font. Outlined letters can't be retyped as text, which is why that conversion belongs in a separate copy.
These problems don't affect the shape-only sample. For a real wordmark, they can decide whether the delivered file looks like the approved design.
Troubleshooting #
| Problem | Likely cause | Repair |
|---|---|---|
| The whole logo changes color | A group or background was selected | Ungroup only as needed; select the intended object |
| Logo becomes stretched | Width and height changed independently | Enable the aspect-ratio lock; undo the stretch |
| Browser lettering differs | Font unavailable on the destination | Install the font or outline text in a delivery copy |
| Part of the logo is missing | Artwork extends outside the page | Adjust Document Properties and inspect again |
| White areas vanish on a page | White shapes sit on a white background | Check both themes; create the appropriate color variant |
| Nodes can't be edited | File contains a bitmap | Obtain the vector source |
Variations for a real handoff #
Make a one-color version
Duplicate the master and choose one fill for the visible shapes. Check overlaps and gaps after the color change. A mark designed around two contrasting colors may need shape adjustments to remain legible in one color.
Prepare a small icon
Inspect the mark at the size it will occupy beside navigation text. Remove detail only in a separate small-size version. The full logo can keep detail that a compact icon cannot display clearly.
Move the asset into a shared design
Import the SVG into Penpot or Figma when the team needs to place it across web layouts. Keep the master SVG alongside the exported asset so the next revision has a clear source.
Completion checklist #
- The correct shapes changed color.
- The proportions and page margins are intentional.
- The editable master is separate from the delivery copy.
- The Plain SVG opens correctly in a browser.
- Text and linked assets behave correctly on the destination.
- The logo remains visible on both page themes.
Next steps #
For shared interface work, read Inkscape vs Penpot. The free SVG-editor shortlist covers other desktop and browser choices.
For a lighter browser edit, consider SVGEdit. If you also need a compact raster preview, the image-compression guide explains resizing and export checks.
