I need a better way to draw letters using SVG path - svg
I am trying to convert my website logo into SVG paths. I have been doing this for 2 days, I have read every article or tutorial to use SVG but I haven't seen one that tells you how to create a simple letter.
Please, I am racking my brains here.
here is what I have:
<path fill="none" stroke="#ff0000" stroke-width="7" d="M36 40,32,33 C-4,24 -1,98 37,54 l0,-5 -21,0"></path>
And this is what I want to achieve.
can you please help me how can I achieve this kind of lettering using SVG paths. As you can see, my artwork is not even close. I'm desperate.
Alright I've done it! I used adobe illustrator to export the SVG with path!
and here is my end result!
<svg width="114" height="17"><path fill="#ff0000" stroke="#ff0000" stroke-width="0.2" d="M12,2.08a6.39,6.39,0,0,1,2.33,3.7H11.83a4.18,4.18,0,0,0-1.6-2A4.54,4.54,0,0,0,7.61,3a4.71,4.71,0,0,0-2.5.68A4.62,4.62,0,0,0,3.39,5.65a6.42,6.42,0,0,0-.62,2.93,6.76,6.76,0,0,0,.63,3,4.42,4.42,0,0,0,1.78,1.94,5.13,5.13,0,0,0,2.66.67A4.6,4.6,0,0,0,11,13a5.17,5.17,0,0,0,1.61-3.28H7.17V7.92h7.48v2.39a7.62,7.62,0,0,1-1.17,3.1,6.8,6.8,0,0,1-2.42,2.22,7.1,7.1,0,0,1-3.45.83,7.25,7.25,0,0,1-3.83-1,6.82,6.82,0,0,1-2.57-2.8A8.82,8.82,0,0,1,.3,8.58,8.82,8.82,0,0,1,1.21,4.5,6.62,6.62,0,0,1,3.77,1.72a7.19,7.19,0,0,1,3.82-1A7,7,0,0,1,12,2.08Zm9.14,2.66a4.64,4.64,0,0,1,2.53-.69V6.76H23a3.86,3.86,0,0,0-2.54.8,3.26,3.26,0,0,0-1,2.64v6.11h-2.4V4.25h2.4V6.61A4.63,4.63,0,0,1,21.16,4.74Zm11.67.16a4.33,4.33,0,0,1,1.58,2.15V4.25h2.4V16.31h-2.4v-2.8a4.3,4.3,0,0,1-1.58,2.14,4.45,4.45,0,0,1-2.69.81,4.88,4.88,0,0,1-4.58-2.89,7.5,7.5,0,0,1-.67-3.3A7.52,7.52,0,0,1,25.56,7a4.92,4.92,0,0,1,4.58-2.89A4.45,4.45,0,0,1,32.83,4.9ZM28.31,7.34a4.22,4.22,0,0,0-1,2.93,4.2,4.2,0,0,0,1,2.92,3.28,3.28,0,0,0,2.56,1.06,3.34,3.34,0,0,0,1.81-.49A3.42,3.42,0,0,0,34,12.37a4.51,4.51,0,0,0,.46-2.1A4.5,4.5,0,0,0,34,8.18a3.34,3.34,0,0,0-3.08-1.9A3.32,3.32,0,0,0,28.31,7.34ZM49.44,5.41a5.6,5.6,0,0,1,1.22,3.87v7h-2.4V9.54A3.56,3.56,0,0,0,47.45,7a2.8,2.8,0,0,0-2.19-.89A3,3,0,0,0,43,7.1a4,4,0,0,0-.87,2.79v6.42H39.7V4.25h2.4V6.9a4.05,4.05,0,0,1,1.56-2.11,4.45,4.45,0,0,1,2.53-.74A4.16,4.16,0,0,1,49.44,5.41ZM60.81,4.9a4.18,4.18,0,0,1,1.56,2.15V.11H64.8v16.2H62.37v-2.8a4.15,4.15,0,0,1-1.56,2.14,4.45,4.45,0,0,1-2.69.81,4.88,4.88,0,0,1-4.58-2.89,7.5,7.5,0,0,1-.67-3.3A7.52,7.52,0,0,1,53.54,7a4.92,4.92,0,0,1,4.58-2.89A4.45,4.45,0,0,1,60.81,4.9ZM56.29,7.34a4.22,4.22,0,0,0-1,2.93,4.2,4.2,0,0,0,1,2.92,3.28,3.28,0,0,0,2.56,1.06,3.4,3.4,0,0,0,1.82-.49,3.47,3.47,0,0,0,1.26-1.39,4.51,4.51,0,0,0,.46-2.1,4.5,4.5,0,0,0-.46-2.09,3.31,3.31,0,0,0-3.08-1.9A3.32,3.32,0,0,0,56.29,7.34ZM84,4.25,80.72,16.31H78.07L75.2,7l-2.9,9.33H69.66L66.44,4.25h2.42L71.07,14,74,4.25h2.53L79.46,14l2.21-9.76Zm12.34,6.52H87.36a3.87,3.87,0,0,0,1,2.76,3.18,3.18,0,0,0,2.3.9,3.26,3.26,0,0,0,2-.64,2.57,2.57,0,0,0,1-1.68h2.57a5.17,5.17,0,0,1-1,2.25,5,5,0,0,1-1.91,1.54,6.43,6.43,0,0,1-5.62-.18,5.21,5.21,0,0,1-2-2.15,7,7,0,0,1-.74-3.3A7,7,0,0,1,85.74,7a5.18,5.18,0,0,1,2-2.14,6.35,6.35,0,0,1,6,0,5,5,0,0,1,2,2,5.93,5.93,0,0,1,.69,2.86A5.63,5.63,0,0,1,96.29,10.77ZM93.57,7.65a2.8,2.8,0,0,0-1.18-1.18,3.51,3.51,0,0,0-1.64-.39,3.31,3.31,0,0,0-2.36.9,3.77,3.77,0,0,0-1,2.65H94A4,4,0,0,0,93.57,7.65Zm14.49-2.81A5,5,0,0,1,109.93,7a7.52,7.52,0,0,1,.67,3.29,7.5,7.5,0,0,1-.67,3.3,4.88,4.88,0,0,1-4.57,2.89,4.46,4.46,0,0,1-2.7-.81,4.15,4.15,0,0,1-1.56-2.14v2.8H98.7V.11h2.4V7.05a4.18,4.18,0,0,1,1.56-2.15,4.46,4.46,0,0,1,2.7-.81A4.94,4.94,0,0,1,108.06,4.84Zm-5.25,1.93a3.42,3.42,0,0,0-1.27,1.41,4.5,4.5,0,0,0-.46,2.09,4.51,4.51,0,0,0,.46,2.1,3.42,3.42,0,0,0,1.27,1.39,3.34,3.34,0,0,0,1.81.49,3.31,3.31,0,0,0,2.57-1.06,4.2,4.2,0,0,0,1-2.92,4.23,4.23,0,0,0-1-2.92,3.31,3.31,0,0,0-2.57-1.07A3.43,3.43,0,0,0,102.81,6.77Z"/></svg>
Beautiful!
Related
Simple test SVG with 2 strokes in a path are different widths
There are many forms of this question on SO but none of them seem to cover this simple case: I have 2 lines in an SVG and they are drawn with different stroke widths. I've tried multiple tricks from the other posts but nothing seems to work. There is something simple here that I'm missing. Here is the simplest form of this bug I can reproduce: <!DOCTYPE html> <html> <body> <svg width="120px" height="410px" viewBox="0 0 120 410"> <g id="rooms" stroke-width="8" stroke="#979797"> <path d="M0,0 L40,0"></path> <path d="M0,20 L40,20"></path> </g> </svg> </body> </html> And here is the drawing result: I've also created a fiddle, trying to use the other SO articles suggestions, with no effect. I've also tested this in Safari, Chrome, and Firefox and all have the same result. I'm a little stunned that such a simple thing has this type of drawing bug. I must be missing something very obvious. In the fiddle I also try using LINE instead of PATH and that DOES work properly. This appears to be related to paths.
OK, this was indeed a noob mistake. It wasn't clear that the width of a stoke is centered on the line. All paths drawn along the edge of my viewBox were effectively clipped. TL;DR: Don't draw from 0,0
Let svg paths "intersect"
sorry, but i don't know how to formulate this question ;) I have a svg animation of an atom. (Not from me, just as an example) http://codepen.io/davidsneighbour/pen/raPBRO The three ellipsae (?) defined by path.class='atom-1' to 'atom-3' are at the moment on top of each other. <path class="atom-1" fill="none" stroke="#555" stroke-width="8" stroke-miterlimit="10" d="M231.7,200c0,17.4-1.7,88-31.7,88s-31.7-70.6-31.7-88s1.7-88,31.7-88S231.7,182.6,231.7,200z"/> I would like to create an effect of 3-d-intersection so that each ellipsis is going at least once behind one of the other ellipsae, well, as if they are intertwined in 3d. is this possible? how do I define some kind of z-index for parts of svg paths?
get actual height of svg bezier curved path
This is more of a bezier question than an SVG question, but here goes... given the following code: <svg xmlns="http://www.w3.org/2000/svg" baseProfile="full" viewBox="0 0 400 400" baseProfile="full"> <path d="M0,0 C20,400 30,200 50,100" fill="#FF0000" stroke="#000000"/> </svg> Using [path].getBBox() returns me a height of 400, since the 1st control point of the curve is at 400 y, and this makes sense(ish). But what I really need is the actual height of the object as rendered, not the box that contains all points used in its drawing. I'm assuming I'm just going to have to figure it out myself? And if that's the case, does anybody have any suggestions for where to go to find such mathy things? I did some googling, but I'm not really coming up with anything (it's very possible I'm not phrasing the question correctly, some help in that regard would be super nice as well).
You are doing it right, it's a WebKit bug. If you try getBBox on Firefox or even Internet Explorer, it's fine. If you need a workaround, give a look at the implementation done for SVG-edit.
SVG horizontal curly-bracket
I am trying to create a wide horizontal curly-bracket starting with the keyboard character and transforming it. I started with : <text x="40" y="120" transform="rotate(90, 40, 120)">}</text> Now I would like to stretch the text to make it wider. Forget about using the CSS font-size element, size the font-weight will also change accordingly, producing a fat symbol. I would like to stretch the character by keeping it thin. I then started using the symbol and usecombination, to try to take advantage of the viewbox capability Here is what I tried last : <symbol id="curly-bracket"> <text>}</text> </symbol> <use x="40" y="120" transform="rotate(90, 40, 120)" xlink:href="#curly-bracket" /> The character now appears cut and I found no way to make it be displayed properly. I am having a hard time understanding what I am doing, reading the W3 SVG doc.
<text x="40" y="120" transform="rotate(90, 40, 120) scale(1,2)">}</text> That will double all the y coordinates, and since you've turned it 90 degrees, will stretch it horizontally. Attempting to learn SVG from the W3 spec is going to leave you frustrated and confused. It's not written as a tutorial on how to use it. Here's a great resource on SVG transforms. I'd recommend reading that entire e-book if you're really interested in SVG. I think it's the best resource out there.
Change SVG Colour
Can you change the color of a shape inside an SVG? Currently I'm using a PNG that I have to manually create in Photoshop for each different menu and I'm wondering if I can make the whole process dynamic.
Can't you just use style="background-color: #------;" (or maybe color:)? EDIT: My mistake, the one you need is fill, so style="fill:#------;", and it should work with any shape.
You could use a hue-rotate filter, or you could fix the colors as suggested above. Probably more compatible to change the colors to what you need, but in any case, here's an example of the filter variant: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <filter id="h200" x="0" y="0" width="1" height="1"> <feColorMatrix type="hueRotate" values="200"/> </filter> <image xlink:href="http://imgur.com/D9aFo.png" width="207" height="46" filter="url(#h200)"/> </svg> You can see it live here if you use a browser that supports svg filters, e.g Opera or Firefox.
#Brendan_Long is correct, all you need is the style tag on a path object. See a demo here: http://kemputing.com/demo/shapeDemoColour.svg Code like so: <path style="fill:#000080;" d="M 125.0,478.0 172.0,305.0 337.0,266.0 508.0,438.0 482.0,586.0 287.0,659.0 z" id="path2985"/> Make a path matching your image then programmatically change the colour attached to it. You might want to use a tool like inkscape to lend a hand.