how to draw a small path with a curve, this is the code i've tried.
Straight Path
<path d="M0,6 H30" stroke="#333" stroke-width="1.5"></path>
Curved path with the same length
<path d="M0,6 Q5,10 15,H30" stroke="#333" stroke-width="1.5"></path>
the curved path is not working
You need to supply 4 parameters for the quadratic curve operator Q. You only supply 3 parameters and you should remove the commas - not that you can't use commas, but they can cause bugs if you use them wrong. Here is an example that draws a quadratic curve and a straight line between the curve's start- and end points:
<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
<path d="M 10 80 Q 95 10 180 80 H 10" stroke="black" fill="transparent"/>
</svg>
See the SVG Path Tutorial and search for quadratic curve.
Q path commands need to have two sets of coordinates after them. That means four numbers. Your path only has three numbers.
Related
Prallel lines use two srokes
Initially I drew 2 parallel lines with 2 different strokes an no problem at all.
But when I use only one stroke, the problem is that when it is drawn in the opposite direction the curvature is changed (the red and the blue lines do not overlap).
Prallel lines use only one sroke
So how to draw two parallel lines using only a single stroke?
In order to reverse the second path you need to:
Move to or line to the last point.
Use the second control point as the first control point.
Use the first control point as the second control point.
End the curve where you had the move to command.
svg{border:solid; background:white;}
path{stroke:red;fill:none;}
.b{stroke:rgba(200,200,0,.25);stroke-width:10 }
<svg viewBox="0 0 350 400">
<g>
<path d="M100,350 C100,350 100,50 250,50" />
<path d="M120,350 C120,350 120,70 250,70" />
<path class="b"
d="M100,350 C100,350 100,50 250,50
M250,70 C120,70 120,350 120,350" />
</g>
</svg>
Svg File
I am working on a graphics application where I can only use Arc, Line, cubic and Quadratic bézier. I have an SVG file, which is a bit long but I just took first few path elements to build to see the output. I wrote a small application which replaces lower letters to upper letters and produced a simple SVG file which consists upper causes and consists only four SVG commands. I have created two paths with original for and the second path with a modified version to confirm my output. Everything seems work fine excluding lower letter ‘m’. The result is not correct. I am not sure way. Any help should be very much appreciated. What mistake I am making? To see the converted version you have to uncomment the send path
There are several things wrong with your SVG.
Your path consists of eleven subpaths. Each of the subpaths form a very thin horizontal rectangle. For example, look at the first subpath:
M 21.52,184.48, H 91.11, v-.07, H21.54, l 0,.07 Z
That's a rectangle that is 91px wide and 0.07 pixels high. A rectangle that is 7/100 of a pixel high is going to be very faint at best. It is visible in Firefox, but Chrome seems to be culling it completely for some reason.
Your fill is invalid.
fill="New_Gradient_35"
should be:
fill="url(#New_Gradient_35)"
Your path definition is invalid. There should not be commas before a path command letter.
M21.52,184.48,H91.11,v-.07,H21.54,l0,.07Z,
should be
M21.52,184.48H91.11v-.07H21.54l0,.07Z
Chrome is a little forgiving. It will allow commas after a coordinate value, but not after a path command. So it doesn't mind:
M21.52,184.48,H91.11,v-.07,H21.54,l0,.07Z
but it doesn't like the comma between the Z and the M:
M21.52,184.48,H91.11,v-.07,H21.54,l0,.07Z,
M ...etc...
Firefox doesn't accept either comma.
You are specifying a stroke colour, but your stroke-width is "0", so your stroke will not be drawn. But perhaps that was intentional.
If you fix these issues, you get a more successful result. I'm not sure if it was what you are expecting though. It doesn't look much like a letter "m" to me.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 498.9 498.9" width="100%" height="100%">
<linearGradient id="New_Gradient_35" x1="369.44" y1="1293.18" x2="137.44" y2="718.97" gradientTransform="translate(15.85 -609.22)" gradientUnits="userSpaceOnUse">
<stop offset="0.07"/>
<stop offset="0.93" stop-color="#454d51"/>
</linearGradient>
<title>Test One</title>
<g id="Case">
<path fill="url(#New_Gradient_35)" stroke-width="0" stroke="red" d="M21.52,184.48H91.11v-.07H21.54l0,.07Z
M469,147.4q1.62,0,3.21,.12l-406.4,0c.67,-.05,1.35,-.09,2,-.12l401.16,0Z
m8.55,.76,.22,0H60.82l.56,-.1h6l-5.47,.06Z
m1,.2,.7,.15,-419.89,0,.4,-.09,418.79,0Z
m2.21,.5,.31,.08H185.41v-.07Z
m1.88,.5,.37,.11H55.54l.23,-.07,426.9,0Z
m.74,.22,.16,0,-428.69,0,.43,-.13,428.11,0Z
m.85,.27,.47,.15H227.91l-63.75,0v0l58.44,-.08Z
m.8,.27,.23,.08,-432.07,0,.35,-.12,431.49,0Z
m.55,.19,.33,.12,-433.37,0,.39,-.14Z
m.83,.31,.2,.08H51.93l.2,-.08Z" />
</g>
</svg>
I have a number of SVG images being inserted into a PDF file using TCPDF. For example:
<path d="M0 100 L 80 100 L 40 27 L 0 100" stroke="black" fill="transparent" stroke-width="5" />
The problem is that TCPDF seems to turn any transparency to grey. How can I make it transparent? I cannot simply turn it to white as it is being placed on top of other data as well.
Many of the shapes are complex, utilizing bezier curves and stroke arrays so I need to use a path rather than lines, polygons, or polylines.
I think this might not be possible, but I have found a workaround. Rather than setting
fill="transparent"
I just use:
fill="none"
or
fill-opacity="0"
This seems to work fine. Both can be found on this page:
How to make an SVG element transparent (using SVGweb)
Let's consider the simple following image in its SVG representation (running the code snippet will display it):
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" height="200" width="200">
<g>
<path d="m 90.200184,21.865233 13.886726,0 0,91.406257 q 0,8.4375 -4.306646,11.86524 -3.7793,2.72461 -13.35938,2.72461 -10.37109,0 -18.19336,-1.05469 l -2.46094,-13.53516 q 11.07422,2.02148 18.45704,2.02148 5.97656,0 5.97656,-5.97656 l 0,-87.451177 z"/>
</g>
</svg>
The SVG path is actually a collection of points all around the shape, while it could be a simple top-down slanted curve (the red line here). Unfortunately, I am provided these images, and cannot change them.
I am looking for a way to convert—or rather approximate—the SVG polygon to an SVG open curve., either directly or in several steps.
Any solution is welcome, but my preference goes to this order:
programmatically (so that I can script it);
using Inkscape or GIMP (or any other Linux program);
well, anything that would work.
Thanks,
Isn't it as simple as deleting the closing z from the path?
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" height="200" width="200">
<g>
<path d="m 90.200184,21.865233 13.886726,0 0,91.406257 q 0,8.4375 -4.306646,11.86524 -3.7793,2.72461 -13.35938,2.72461 -10.37109,0 -18.19336,-1.05469 l -2.46094,-13.53516 q 11.07422,2.02148 18.45704,2.02148 5.97656,0 5.97656,-5.97656 l 0,-87.451177"/>
</g>
</svg>
Or are you looking for something more complicated than that?
Obviously, deleting the closing z is simple to script in your programming language of choice.
This class of algorithms is generally known as finding the "skeleton" or "medial axis". If you search on those terms you will find papers and other documents describing different potential approaches. Many/most usually involve starting with bitmaps though.
https://en.wikipedia.org/wiki/Topological_skeleton
I want an arc line that goes from thick to thin, kind of like figure 13 here:
Is this possible with SVG?
Not with just a stroke, no. You would have to use a fill, and offset the paths slightly to get the tapering effect.
I found a way to do it, just draw two lines with a little offset in beginning point. Just like this:
<svg viewBox="0 0 1000 400">
<path d="M 50,250 C 50,150 150,50 250,50" fill="none" stroke="green" stroke-width="11"></path>
<path d="M 60,250 C 60,150 150,50 250,50" fill="none" stroke="green" stroke-width="11"></path>
</svg>
In Inkscape, there are Triangle In and Triangle Out styles for drawing curves that look like that, and they just make a path, so I assume not.