I am trying to modify a SVG file which has a path converted from a text. I want to be able to manipulate it to create Word Art like effects (eg: Wedge, Widen, Curved text etc).
I've tried many options like parsing the file and modifying each point, but the results are bizarre and curves go wild. There is no tool/library to do this kinda stuff to an svg file.
In short, I am looking for a tool like ImageMagick but for svg. Please Help!!!
Inkscape can do some of this I think, also see this writeup by Tavmjong Bah. Inkscape uses a library called lib2geom to do these effects, and there seems to be a python wrapper for that library.
Related
I have an SVG graphic that I want to put some text on from my PHP variables. The graphic was generated in Illustrator and resizes in my web page to 100% width. Here is a representation of it:
How could this be done for the 8 text items? Does something special need to be done in Illustrator, like creating an anchor point for the text? How do I update the text item? I've done research but haven't been able to find a similar situation.
Thankful for any information that could help me narrow down my search.
Being someone who has never worked with files of .SVG file type before, this was a misunderstanding.
If you design a graphic in Adobe Illustrator, save it as an SVG and edit it with your favorite text editor, you will be able to see the SVG mark-up. It all makes sense now, and here you will be able to change the text at the code-level.
For my application, I saved the SVG as a PHP file and did an include on it, while changing the raw text to PHP variables in said file. This allowed me to pass my dynamic text as variables to the graphic.
Does anyone have experience or insights into how to convert SVG to PNG using ImageMagick.NET where the SVG has custom embedded fonts?
I've seen similar posts about this, but I'm specifically interested in ImageMagick.net and I would like to avoid calling anything from command line. I currently use Batik, but I want to move this to Azure and I don't want to go through starting the JVM so that the JAR file can be executed.
Note additionally, my problem is that I am getting the SVG from another party and most fonts are not freely available, so I can't just pre-install all potential fonts.
Many thanks for any insight.
I don't know anything about azure platform, but I can share some insight on the SVG process within ImageMagick. This is more of a long-winded comment than an answer
ImageMagick (of which Magick.net sets on top of) performs tasks on raster images, so any vector input must be "decoded" into a raster image before any additional work be be done. For SVG images, I'm aware of three ways ImageMagick can render vector graphics into authenticated pixels.
Use a primitive internal MSVG coder to draw each shape.
Pass the rendering work to librsvg if compiled with delegate library support. (Usually on *NIX systems)
Call an external command-line application. Identical to the suggestions referenced in the links you provided.
If I would map it out, I would imagine it would look something like this.
SVG Fonts with MSVG (option #1)
I believe this is the option your asking about as it would be the default configuration for must ImageMagick installs. For a font to be rendered, the typeface must be found on the system, and supported by freetype (.ttf or .otf files). Embedded fonts are usually base64 ttf files attached inline under the #font-face CSS at-rule. If this is true, you should be able to preprocess the document, extract the font-file to a local/temporary filesystem, and assign it with MagickReadSettings.FontFamily before reading the SVG document. Although I'm not sure if this would work with multiple fonts.
SVG Fonts with RSVG (option #2)
The librsvg offers a lot more support for SVG specs then the internal renderer, but also enforces more restricted approach for external resources. There's also an open issue with adding support to #font-face, so you might be forced to do option #1 anyway.
External Command-line (option #3)
This would be your best option. ImageMagick's delegate.xml file can be altered to call other utilities. Inkscape, for example, can be called by ImageMagick with the following rule..
<delegate decode="svg" command="inkscape.exe -e %o %i"/>
Although I'm not sure if inkscape is a good example as support for CSS fonts are still listed on a wishlist.
TL;DR
... convert SVG to PNG using ImageMagick.NET where the SVG has custom embedded fonts?
All-n-all, it boils down to the right tool for the right job. If your only use-case is converting SVG+CSS to PNG, and you have no additional raster manipulation tasks, a direct utility like batik is more appropriate than ImageMagick. Like it or not, installing a JRE to execute a JAR file might be the best option. Magick.net by itself doesn't meet your requirements.
I was casting around for a solution for to another question I had ( Stretch text in inkscape, but then wrap it to a path ) and I wondered if it was possible to easily and programmatically make one font from another? As a concrete example, can I take FreeSerif font, double its height, and produce another font, calling it FreeSkinnySerif? (I could then use FreeSkinnySerif in Inkscape and get the effect I'm after.)
FontForge Scripting might work for you, in particular scale. I suggest trying out the command in the GUI first, than create the script.
I don't know about a scripting solution, but have you tried the SVG Font editor that is built in to Inkscape?
Text->SVG Font Editor.
I guess that you could make a python script that used it somehow, but simply using the tool from inkscape would probably bee faster.
Here is a tutorial.
I am trying to make a tool for my website which traces over Japanese characters, showing the stroke order etc.. something like this: http://www.chinesehideout.com/tools/strokeorder.php?c=5pel
I have made a bunch of SVG files in inkscape, which are made up of just curves, one for each stroke of the character. I have then imported these into Raphael using the raphael-svg-import: https://github.com/wout/raphael-svg-import
The SVGs are displaying perfectly, however I want to animate them.
My question is: Is there a way to take each path from the SVG in turn in Raphael, and then animate/stroke them? If so..how??
If you need any more info please say!
Thanks
EDIT: Perhaps I should clarify, when I say stroke I mean progressively draw the line, starting from the first point and ending at the last. At the moment it draws all paths simultaneously and draws the whole of each path at once.
The technique people use in svg for doing this is outlined in this answer. It's probably possible to adapt that to Raphaël, though the Raphaël documentation doesn't list stroke-dashoffset.
Raphaël has a method Element.getSubpath(from, to) that can be used to get only part of a path, that should probably also be an option.
Is it possible to simplify / clean up svg code by replacing the use-tags with standard svg elements? Maybe an inkscape plugin? Haven't found anything...
Background: I'm converting some svgs to javafx graphics (.fxz) with javafx's production suite. And the tool doesn't understand the <use> element.
Take a look at Scour - an SVG scrubber
Scour is an open-source Python script that aggressively cleans SVG files, removing a lot of 'cruft' that certain tools or authors embed into their documents. The goal of scour is to provide an identically rendered image (i.e. a scoured document should have no discernable visible differences from the original file).
They also have an extension for Inkscape as of v.48. To use it, go to "Save As.." and choose "Optimized .SVG. Be careful, and check your output, as I've found it can get too aggressive. Take these examples for instance, if they show up...
Good: Bad:
They claim to have and an online tool that does the same tricks... but as of 6/2011 it was not working. Hope this helps you clean up those often SCARY looking SVG's. Sometimes I feel like I'm the only one that realizes what this format is capable of!