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?
3
-
1Why would you trace a plus sign as opposed to merely drawing 2 rectangles? Tracing, in any application, is never 100% accurate.– ScottFeb 20, 2020 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!– NormajeanFeb 20, 2020 at 3:42
-
1No.. you can draw it in Inkscape and save as SVG. No tracing.– ScottFeb 20, 2020 at 3:53
Add a comment
|
2 Answers
Recreate it entirely in Inkscape. Tracing bitmaps is pretty pointless for something so simple.
Draw a rectangle with a black fill.
Copy it Ctrl+C, and Paste in Place Shift+Alt+V.
Do Object > Rotate 90º CW
If you want one shape, you could select both objects and do a Union Ctrl++
answered Feb 21, 2020 at 14:46
-
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 Feb 23, 2020 at 0:36
-
There's no conversion required. Inkscape's native file format is SVG. So yes, File > Save. Feb 23, 2020 at 9:38
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
