0

I've been using inkscape to create SVGs. But I've come across a problem. I've created a simple plus sign (as simple as you can imagine). It is currently in PNG format with a transparent background. I've imported it into inkscape so I can convert it into a SVG. However, when I use trace bitmap, Inkscape CHANGES THE SHAPE such that the straight lines that are one pixel wide are tappered! I've tried different options in the trace bitmap settings but nothing seems to work. Help?

  • 1
    Why would you trace a plus sign as opposed to merely drawing 2 rectangles? Tracing, in any application, is never 100% accurate. – Scott Feb 20 at 3:18
  • When I draw it with html and css the position and weight of the lines changes from one browser to another. I think I have found a solution though - I can draw it with a 2px width, but I can draw it much larger than what I need. And then when I load it into my site, I resize it down to the size I need there using css. And the 2 px width becomes 1 px width! – Normajean Feb 20 at 3:42
  • 1
    No.. you can draw it in Inkscape and save as SVG. No tracing. – Scott Feb 20 at 3:53
1

Recreate it entirely in Inkscape. Tracing bitmaps is pretty pointless for something so simple.

  1. Draw a rectangle with a black fill.

  2. Copy it Ctrl+C, and Paste in Place Shift+Alt+V.

  3. Do Object > Rotate 90º CW

If you want one shape, you could select both objects and do a Union Ctrl++

| improve this answer | |
  • how do I then convert that to an svg though? Do I literally just go 'save as' and then choose svg? I was under the impression I had to go through a process – Normajean Feb 23 at 0:36
  • There's no conversion required. Inkscape's native file format is SVG. So yes, File > Save. – Billy Kerr Feb 23 at 9:38
0

For the simplest SVG, you want to write it yourself. Apps like Inkscape will interpret what you do in the graphical editor to generate code, and generated code is always less lean than what a coder can write. Most of the time the auto-code is adequate, but not when uploading SVGs to tools with strict specifications or limited feature support.

<?xml version="1.0"?>

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">

  <path fill="#FF0000" d="M33 0 L33 33 L0 33 L0 67 L33 67 L33 100 L67 100 L67 67 L100 67 L100 33 L67 33 L67 0 Z"/>

</svg>

For more info on SVG basics check out: https://www.w3schools.com/graphics/svg_intro.asp

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.