I am using trumbowyg and I need to create some of the custom SVG icons from MDI (Material Design Icons) Icons
Example:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol id="trumbowyg-blockquote" viewBox="0 0 72 72">
<path d="............."></path>
</symbol>
<symbol id="trumbowyg-fullscreen" viewBox="0 0 72 72">
<path d="............."></path>
</symbol>
</svg>
Is there a tool that can convert a MDI Icon to SVG so that I can use it with trumbowyg
First convert MDI to TIFF provide by Microsoft itself (MDI2TIFConverter.exe) on https://www.microsoft.com/en-us/download/details.aspx?id=30328, then convert the obtained raster image to vector format by a tool like potrace http://potrace.sourceforge.net/samples.html
I have found the answer, use this tool will do: https://icomoon.io/app
Related
I am using Apache FOP to generate PDFs, some pages require SVGs. For the most part, this works fine until I add the TextPath element. I am using this to get curved text. This SVG works in browsers but not in the PDF. Wikipedia shows Batik (the SVG renderer for Apache FOP) is compatible with TextPath: https://en.wikipedia.org/wiki/Comparison_of_layout_engines_(Scalable_Vector_Graphics). But no luck.
Any help on this would be appreciated. Note: I am intentionally trying to add text instead of a rasterized images as the text is being localized and injected in.
Here is a sample of an svg which can be found here: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/textPath.
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<path id="MyPath" fill="none" stroke="red"
d="M10,90 Q90,90 90,45 Q90,10 50,10 Q10,10 10,40 Q10,70 45,70 Q70,70 75,50" />
<text>
<textPath href="#MyPath"> <!-- works if I remove this line -->
Quick brown fox jumps over the lazy dog.
</textPath> <!-- and this line -->
</text>
</svg>
According to the SVG 1.1 recommendation, xlink:href should be used to reference the path element. See https://www.w3.org/TR/SVG11/text.html#TextPathElement.
The following image displays in the Squiggle GUI (Batik 1.12), Firefox and Chrome.
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<path id="MyPath" fill="none" stroke="red"
d="M10,90 Q90,90 90,45 Q90,10 50,10 Q10,10 10,40 Q10,70 45,70 Q70,70 75,50" />
<text>
<textPath xlink:href="#MyPath">
Quick brown fox jumps over the lazy dog.
</textPath>
</text>
</svg>
The client asked to scale the drawing down so I added width/height and viewBox to the SVG element. The problem is that some elements are scaled differently than others. The structure of the svg is like this:
<svg width="100%" height="100%" viewBox="0 50 700 200">
<defs>...</defs>
<g id="group-ab">
Here are the boxes (drawn with polyline) that are scaled correctly, both in their own group (group-a, group-b)
</g>
<g id="group-a-id">
<text>A</text>
<circle id="group-a-id-bg-circle"></circle>
</g>
<g id="group-B-id">
<text>B</text>
<circle id="group-b-id-bg-circle"></circle>
</g>
<path id="group-a-pattern" d="..."></path>
<path id="group-b-pattern" d="..."></path>
</svg>
The path is the pattern for the pieces. It seems that everything that isn't under the group "group-ab" isn't scaled correctly, see the image below. Normally (when not using viewBox) the pattern fills up the boxes and the A/B are centered with the boxes (same translates are done to them).
Why is this happening? One would think that it doesn't matter if elements are within groups or not if svg is scaled.
I would like to insert a text (maybe multi-line) into a rect, vertically and horizontally centered. The SVG is created on server side in NodeJS, and the result will be displayed in a browser.
SVG does not really support centering text. On the other hand, I have no idea how to calculate width/height of a text on server side to position it properly.
Any ideas?
If you know the width/height, you can position your text element with x,y and set the alignment to middle...
https://jsfiddle.net/ian_b/z9t291nL/1/
<svg width="400" height="400" viewBox="0 0 400 400">
<text text-anchor="middle" alignment-baseline="middle" x="200" y="200">QWERTYUIOPASDFGHJKLZXCVBNM</text>
<circle cx="200" cy="200" r="5"/>
</svg>
Its more tricky for multiple lines, and you would need to adjust taking into account font sizes etc.
I'm working on a PHP script that generates a jpg wallpaper from an SVG-file according to the screen resolution of the visitor. The wallpaper consists of a circular gradient (rectangle) background and a path on top of it. How would you go about centering the path horizontally and vertically to the rectangle? Remember that the rectangle's size and proportions are not a constant. Should I separate the background and path to different svg files or is there an easy way to center paths? Maybe a framework?
This is easilly achieved by using nested <svg> elements and the preserveAspectRatio attribute. Put your background in the outer svg and your path in the inner one.
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%">
<rect id="background" width="100%" height="100%" fill="grey"/>
<svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 30 40" width="100%" height="100%">
<g>
<circle cx="15" cy="20" r="10" fill="yellow"/>
<circle cx="12" cy="17" r="1.5" fill="black"/>
<circle cx="18" cy="17" r="1.5" fill="black"/>
<path d="M 10 23 A 8 13 0 0 0 20 23" stroke="black" stroke-width="2" fill="none"/>
</g>
</svg>
</svg>
Run this snippet and try resizing the window.
To get this to work, all you need to ensure is that the viewBox attribute on the inner <svg> element is correctly set.
If you know the coordinates of the paths, you could take the total of the x/y coordinates and divide by the number of coordinates, this will give you the average position for the coordinate set. Then, offset each coordinate by the coordinates for half the width/height of the square, plus any offset, minus the difference between the center of the coordinate set and half the width/height of the square.
This should result in your coordinates being centered within the square, I think (it is rather early here, and I've just started my first coffee, so I could be wrong). This is of course assuming you know all the variables in play (the width/height of the square, any offset applied and the coordinates of the path).
I need to convert svg to png at the command-line. I tried using imagemagick but it seems to have a bug when used with rotate transforms, e.g. this sample s3.svg:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg">
<g id="layer1">
<circle cx="200" cy="200" r="200" stroke="black"
stroke-width="0.5" fill="none"/>
<g transform="rotate(48 200 200)">
<path id="path00" style="fill:#dca08c;stroke:#000000;stroke-width:1"
d="M 200,0 L 400,200 L 200,400 L 0,200 z"/>
</g>
</g>
</svg>
I was able to use inkscape at the command-line:
c:\app\inkscape\portable\App\Inkscape\inkscape.com -f s3.svg -e s3.png --export-background=white --export-area=0:652:400:1052
but SVG coordinates (0,0) are defined at the upper left whereas in inkscape's export the export area is (0,0) defined at the lower left.
How can I use inkscape to export without the magic number 1052 that defines the page height?
One way that might help is to draw an area you want as a container, give it an id, and export that with the -i id option. Give the wrapper blank background/border if it shouldn't be visible.
Edit (adding example):
I used this xml
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg">
<g id="layer1">
<rect width="400" height="600" id="wrapper" fill="none"></rect>
<circle cx="200" cy="200" r="200" stroke="black"
stroke-width="0.5" fill="none"/>
<g transform="rotate(48 200 200)">
<path id="path00" style="fill:#dca08c;stroke:#000000;stroke-width:1"
d="M 200,0 L 400,200 L 200,400 L 0,200 z"/>
</g>
</g>
</svg>
And with this command (I'm on a mac, so translate specific OS as needed) I could control the size/position of the output png:
/Applications/Inkscape.app/Contents/Resources/bin/inkscape -f test.svg -e out.png -i wrapper
I'm not an svg expert so I'm not sure if there are some specific things inkscape does, but I've always found it very web compliant. In the past I've used its svg files directly in web pages.
It seems what you are trying to export is the whole drawing.
inkscape has the option to export the drawing with --export-area-drawing instead of specifying the area to export.
c:\app\inkscape\portable\App\Inkscape\inkscape.com -f s3.svg -e s3.png --export-background=white --export-area-drawing
If the problem is not knowing the page height then the following syntax might help?
c:\app\inkscape\portable\App\Inkscape\inkscape.com s3.svg -z --query-height
This should return the pixel height of the document, you can use the returned number in your export call.
Inkscape has canvas size option, I had the same problem exporting for the web - your image drops out of the viewport.
Change canvas/artboard size to meet the size of element you are exporting