I want to fill a SVG path completely with a jpg or png image. I found this answer very useful ( Crop to fit an svg pattern ) but this doesn't seem to work for more complex paths. It does for rect and circles :-). When applying this code to a path it shows the jpg images upside down and mirrored. In several browsers.
This behaviour can be seen at http://www.paulvanroekel.nl/specials/colourmyvm/test.html
Any ideas?
Solved by removing unnessecary scale and transform code and by changing the coordinates for "M" (absolute) to "m" relative. That did the trick. Basically I edited the svg file again in Inkscape and saved it als normal SVG.
Related
I know nothing about SVG. Even less about SVG fonts. However, I need to use them in my web project.
I've created a custom font with fontello and analyzed the format of the SVG file in a text editor. Then I opened an SVG file created with Inkscape (saved as plain SVG) and used its d attribute to create a new glyph in the font.
I couldn't believe that it actually worked ... well, almost ... the glyph appears flipped vertically. I have tried flipping it in Inskcape. However, when I save the file, the original d attribute is left as it was. It just adds a transform with a matrix that flips the coordinate system, but which does now work in the <glyph> tag.
Is there any way I could apply this transformation in the font file, or in Inkscape, to change the d attibute?
Thanks.
I found that, in Inkscape, ungrouping and then grouping the object applies the transformation to the coordinates.
I don't understand the way Raphael or SVG works.
I want to create a map of germany, using SVG and Raphael. I have the paths of each administrative area and creation works, but the result got an own size.
I mean, if I tell Raphael being 300x300px and add some paths the objects generated by paths are larger.
Code:
var paper = new Raphael(document.getElementById('svnInnerGroup'), 300, 300);
paper.path('...');
Result: I get a 300x300 pixel SVG graphic (this is good), with the upper left corner of germany (this is not good). I expect that the map of germany would fit to the given size.
Maybe I don't understand the concept, I hope you can help me.
Thanks!
Okay, I have found my mistake! Such SVG graphics always need a "viewbox", which defines the beginning and ending of the document. When I copy any paths from any file, I need to copy and use the viewbox too.
This is how you can set the viewbox with raphael:
paper.canvas.setAttribute("viewBox", "0 0 591 800");
Thanks!
I tried to resize svg file to be opened in illustrator with smaller width and height(pixels or cm), I did this by changing width, height and viewBox attributes in <svg> tag, but it doesn't work at all. By search I have found that transform attribute via matrix value affects the real resizing of the figure, any ideas about ready made functions or scripts using python or librsvg to successfully scaling the svg figure, by the way I'm using inkscape to produce svg files. THANKS
You could try svg scour, that should be able to find a good viewBox to use (note spellning and uppercase 'B'). Then change only the width and height attributes to be whatever you want, and hopefully that should work.
In inkscape the coordinate system is bottom/top corner (meaning, 0,0 is left bottom corner). This is the same case with Adobe Illustrator. But, when I try to use this path string in raphael it use top/bottom (meaning, 0,0 is top/left corner) approach. How to convert this path string according to browser's coordinates or raphael's coordinates?
I had this problem before and the easiest way that I found to solve it is to flip the image before getting the path string.
I have been experiencing a similar issue trying to make a map I created in Inkscape. All of my countries were off the charts, literally!
I just copied my svg file into Ready Set Raphael and it worked like a charm.
I have a path I've created in Illustrator and saved as an SVG.
Now I want to programmatically place it at different sizes and coordinates on a large canvas.
Say I've got this image:
(source: omgtldr.com)
How would I reproduce that same image in different places and sizes in one SVG file, like this:
(source: omgtldr.com)
for example, one version shrunk by 20% at coordinates x,y; another enlarged by 30% at coordinates a,b and so on.
Please assume I'm going to be OK with the programming part, I'm comfortable working with XML files. It's the SVG parts I don't understand.
You need the transform attribute. You can move your paths with translate and resize them with scale.
Better to use the <use> element (transformed) than to copy your path for each instance.