SVG rect to path [duplicate] - html
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 4 years ago.
Improve this question
does anyone know of a tool that can take an SVG file, and convert it into an HTML 5 SVG path? you know, the d="M 0 0 L 20 134 L 233 24 Z" fill="#99dd79" part?
I head here: Use Adobe Illustrator to create SVG Path using "move to" commands
But not sure. Does this mean Illustrator can take any line drwaing and save it as an SVG path?
Note:
Yes there is inkscape, but I'm looking for gradient and masking support, if that's possible. I'd like to be able to utilize .ai files and export them using illustrator or Acrobat or something... is there something out there? Or is it built in to Illustrator or Acrobat as an output format?
Gimp can be used to convert SVGs with primitives (e.g. rects, circles, etc.) into a single path which can be used within HTML5.
First download Gimp: https://www.gimp.org/downloads/
Export your SVG as a .svg file with any tool of choice e.g. Illustrator. Don't worry if the SVG output is messy for now, Gimp will clean it up
Import the SVG file into Gimp with File -> Open, and the following (or similar) dialog should show up:
Check both the Import Paths and Merge imported paths options
Then go to Windows->Dockable Dialogues->Paths
Right-click on the single path which says Imported Path and you should see the following dialog:
Click Export Path... and save this text file to a location of your choice
Locate and open up this file with a text editor of your choice e.g Notepad, TextEdit
Copy the text within the <path d="copy this text here" />
Since Gimp formats the text with lots of spaces, you may need to re-format it, by removing some of the spaces to paste it into your HTML in a single line
Open the SVG with you text editor. If you have some luck the file will contain something like:
<path d="M52.52,26.064c-1.612,0-3.149,0.336-4.544,0.939L43.179,15.89c-0.122-0.283-0.337-0.484-0.58-0.637 c-0.212-0.147-0.459-0.252-0.738-0.252h-8.897c-0.743,0-1.347,0.603-1.347,1.347c0,0.742,0.604,1.345,1.347,1.345h6.823 c0.331,0.018,1.022,0.139,1.319,0.825l0.54,1.247l0,0L41.747,20c0.099,0.291,0.139,0.749-0.604,0.749H22.428 c-0.857,0-1.262-0.451-1.434-0.732l-0.11-0.221v-0.003l-0.552-1.092c0,0,0,0,0-0.001l-0.006-0.011l-0.101-0.2l-0.012-0.002 l-0.225-0.405c-0.049-0.128-0.031-0.337,0.65-0.337h2.601c0,0,1.528,0.127,1.57-1.274c0.021-0.722-0.487-1.464-1.166-1.464 c-0.68,0-9.149,0-9.149,0s-1.464-0.17-1.549,1.369c0,0.688,0.571,1.369,1.379,1.369c0.295,0,0.7-0.003,1.091-0.007 c0.512,0.014,1.389,0.121,1.677,0.679l0,0l0.117,0.219c0.287,0.564,0.751,1.473,1.313,2.574c0.04,0.078,0.083,0.166,0.126,0.246 c0.107,0.285,0.188,0.807-0.208,1.483l-2.403,4.082c-1.397-0.606-2.937-0.947-4.559-0.947c-6.329,0-11.463,5.131-11.463,11.462 S5.15,48.999,11.479,48.999c5.565,0,10.201-3.968,11.243-9.227l5.767,0.478c0.235,0.02,0.453-0.04,0.654-0.127 c0.254-0.043,0.507-0.128,0.713-0.311l13.976-12.276c0.192-0.164,0.874-0.679,1.151-0.039l0.446,1.035 c-2.659,2.099-4.372,5.343-4.372,8.995c0,6.329,5.131,11.461,11.462,11.461c6.329,0,11.464-5.132,11.464-11.461 C63.983,31.196,58.849,26.064,52.52,26.064z M11.479,46.756c-4.893,0-8.861-3.968-8.861-8.861s3.969-8.859,8.861-8.859 c1.073,0,2.098,0.201,3.051,0.551l-4.178,7.098c-0.119,0.202-0.167,0.418-0.183,0.633c-0.003,0.022-0.015,0.036-0.016,0.054 c-0.007,0.091,0.02,0.172,0.03,0.258c0.008,0.054,0.004,0.105,0.018,0.158c0.132,0.559,0.592,1,1.193,1.05l8.782,0.727 C19.397,43.655,15.802,46.756,11.479,46.756z M15.169,36.423c-0.003-0.002-0.003-0.002-0.006-0.002 c-1.326-0.109-0.482-1.621-0.436-1.704l2.224-3.78c1.801,1.418,3.037,3.515,3.32,5.908L15.169,36.423z M25.607,37.285l-2.688-0.223 c-0.144-3.521-1.87-6.626-4.493-8.629l1.085-1.842c0.938-1.593,1.756,0.001,1.756,0.001l0,0c1.772,3.48,3.65,7.169,4.745,9.331 C26.012,35.924,26.746,37.379,25.607,37.285z M43.249,24.273L30.78,35.225c0,0.002,0,0.002,0,0.002 c-1.464,1.285-2.177-0.104-2.188-0.127l-5.297-10.517l0,0c-0.471-0.936,0.41-1.062,0.805-1.073h17.926c0,0,1.232-0.012,1.354,0.267 v0.002C43.458,23.961,43.473,24.077,43.249,24.273z M52.52,46.745c-4.891,0-8.86-3.968-8.86-8.858c0-2.625,1.146-4.976,2.962-6.599 l2.232,5.174c0.421,0.977,0.871,1.061,0.978,1.065h0.023h1.674c0.9,0,0.592-0.913,0.473-1.199l-2.862-6.631 c1.043-0.43,2.184-0.672,3.381-0.672c4.891,0,8.861,3.967,8.861,8.861C61.381,42.777,57.41,46.745,52.52,46.745z" fill="#241F20"/>
The d attribute is what you are looking for.
Open the svg using Inkscape.
Inkscape is a svg editor it is a bit like Illustrator but as it is built specifically for svg it handles it way better. It is a free software and it's available # https://inkscape.org/en/
ctrl A (select all)
shift ctrl C (=Path/Object to paths)
ctrl s (save (choose as plain svg))
done
all rect/circle have been converted to path
(In reply to the "has the situation improved?" part of the question):
Unfortunately, not really. Illustrator's support for SVG has always been a little shaky, and, having mucked around in Illustrator's internals, I doubt we'll see much improvement as far as Illustrator is concerned.
If you're looking for DOM-style access to an Illustrator document, you might want to check out Hanpuku (Disclosure #1: I'm the author. Disclosure #2: It's research code, meaning there are bugs aplenty, and future support is unlikely).
With Hanpuku, you could do something like:
Select the path of interest in Illustrator
Click the "To D3" button
In the script editor, type:
selection.attr('d', 'M 0 0 L 20 134 L 233 24 Z');
Click run
If the change is as expected, click "To Illustrator" to apply the changes to the document
Granted, this approach doesn't expose the original path string. If you follow the instructions toward the end of the plugin's welcome page, it's possible to edit the Illustrator document with Chrome's developer tools, but there will be lots of ugly engineering exposed everywhere (the SVG DOM that mirrors the Illustrator document is buried inside an iframe deep in the extension—changing the DOM with Chrome's tools and clicking "To Illustrator" should still work, but you will likely encounter lots of problems).
TL;DR: Illustrator uses an internal model that's pretty different from SVG in a lot of ways, meaning that when you iterate between the two, currently, your only choice is to use the subset of features that both support in the same way.
Surprised no one mentioned Illustrator's Save As > Format dropdown > .svg option.
Outputs an .svg file that contains the path (and the rest of the svg definition) within an .svg (xml) file.
The path itself is within <path d>.
Related
Text heavy iOS App. Store text in HTML, Plist, or Other?
I'm writing relatively complex iOS app that is very text heavy.
The text is also heavily formatted. It has lots of color, size, font, and spacing changes, as well bulleted lists and other text features you'd expect to see in a very rich website.
The text is displayed on about 40 different views. Some of which display a lot of text, others a little. There is no one template that all the pages follow. (There are some that are similar, but that's not the point.)
Lastly, the text is constantly being changed and updated by an editorial team during development, not so much after release. The text has to be stored on the device, downloading files is not an option.
My question is, what is the best way to store and then render all this text in an iOS App?
My approach
Store all the text content and formatting info in an html file and use
[[NSAttributedString alloc] initWithFileURL:htmlDoc
options:#{
NSDocumentTypeDocumentAttribute:NSHTMLTextDocumentType}
documentAttributes:&attrDict
error:&error];
to create a NSAttributed string and use that to populate UITextViews.*
*Note: I would do some more work before creating the UITextViews. First I would parse it to find the appropriate page number [[Page:1.3]] and then parse the elements in that section [[header]], [[side_scroller]], etc...
I like this approach for two main reasons:
It created a separate copy document that contained all the text
and formatting info.
I'm the only iOS developer, but we have a couple front-end
developers. So when we get slammed with changes that need to be done
in 3.45 minutes, I could have some of the guys help me make the
changes, without having to know all the nuances of UIFont and
related classes. Occasionally, the editors could even make the
changes themselves :)
Minor reasons for liking this approach:
The text can vary so much per page, that creating a new UIFont + Plist entry to store the formatting info seems like a bigger pain than having everything in a .html document. (I could be wrong about this.)
Project managers will inevitably say: "Make this word a little bigger," "This word looks strange, add italics," and "Make everything purple!" HTML/CSS seems like a more flexible solution for quickly implementing these requests.
Downsides of this approach:
NSAttributedString picks up 99% of the HTML attributes I threw at it. It did not pick bullet spacing changes in unordered lists <ul>.
Plists are more performant.
Here are some other approaches I considered:
Plist + UIFont
RTF Document - Originally started with this, but found it hid a lot of what was going on and NSAttributedString wouldn't pick up some of the changes.
XML
Any advice or input would very appreciated.
Notes:
iPad app,
iOS 7,
No Internet Connectivity,
Xcode 5
What I did to store styled text in an iOS app was to write a Mac OS command line tool that opens RTF files and converts them to attributed strings (It's a 1-line call in Mac OS, but not supported in iOS for some reason.) I then use NSCoding to save the attributed strings as binary data, with a special .DATA filetype. I created a custom UITextView category with a method that knows how to load the text view's attributed text from my custom filetype. I created a build rule in my project that treats RTF files as source files in a build step and the .DATA filetype as the output, and copies the .DATA files into the build project. Now, all I have to do is add an RTF file to my project the build process inserts the .DATA version of the styled text into the executable. The Xcode editor knows how to edit RTF files, so you can edit them right in place in the IDE, OR you can edit them in TextEdit or any editor that supports RTF files. There are a few things you can put in an RTF that aren't supported in UITextViews. (I don't remember what those are offhand. Sorry.) I find styled WYSIWYG text much easier to deal with than HTML. You just edit the text, and the build process picks up the changes. It worked beautifully. Plus, binary NSCoding output is a whole lot more compact than HTML.
I would recommend using web view. It can open files in resource bundle. You can disable all the links in HTML by implementing delegate method shouldStartLoadWithRequest to return NO. You might also want to set dataDetectorTypes to UIDataDetectorTypeNone. That will disable auto link detection in web view
Convert .ttf file to .png
Is there any way to convert a TTF to PNG files? Or any other method to create Sprite out of TTF file in LIBGDX framework? Is there any application available for it?
Before running
LibGDX has a built-in tool in the gdx-toolsproject called Hiero. Just run that project as a java application, and when asked which class to run, choose that one. It lets you take a .ttf file and render it the characters you need (in a size given in pixels), plus it generates a file that contains information about where each character is on the texture. In the program, it's very simple to initialize and use:
BitmapFont font = new BitmapFont(Gdx.files.internal("data/font/font.fnt"));
...
font.draw(spriteBatch, "Text to output", coordX, coordY);
(font.fnt is the file containing the texture positions and other relevant information, it also refers to the .png which is created in the same folder by default.)
You can take a look at the BitmapFont documentation here.
During runtime
A disadvantage of Hiero is that bitmap fonts don't really scale well, so they can look quite bad on different screen resolutions.
Take a look at this answer to a related question:
One solution is to use the FreeType extension to libgdx, as described here. This allows you to generate a bitmap font on the fly from a .ttf font. Typically you would do this at startup time once you know the target resolution.
I haven't personally used it, but it seems like something worth checking out. It looks very simple as well - the example code in the linked answer is 5 lines long.
Finally I got the solution to the same problem(TTF to PNG) which I faced too. Follow the below steps, 1. Convert TTF to SVG Use TTF to SVG conversion tool to convert your custom or downloaded TTF file to SVG file 2. Convert SVG to PNG/PDF/TTF: Goto IcoMoon, in the top left corner, there will be button to Import Icons, click and upload your converted SVG file. In the bottom bar, there will be an option "Generate SVG & More" as in the below image, click on it Next, Click the Settings gear icon near "Download" option to override size, output formats(PDF,PNG,etc.,) and then close the Settings Now click download to get the outputs into a single zip file !!!
A ttf is a true-type font. It is not a picture, but a vectoric character set. You can't convert it to a picture simply with a tool. If you want to view/manipulate ttf files, you can do this with ttf editing tools, for example fontforge ( http://fontforge.sourceforge.net ).
This may be an old question, but I found the following batch file works with ImageMagick 7: #ECHO OFF set f=wingding.TTF set ps=800 set bg=white set ext=png set s=600x600 set alpha=A B C D E F G H I J K L M N O P Q R S T U V W Z Y Z set num=0 1 2 3 4 5 6 7 8 9 For %%X in (%alpha% %num%) do ( convert -font %f% -pointsize %ps% -size %s% -background %bg% label:%%X %%X.%ext%) pause exit NOTE: This conversion only works with a limited selection of font characters. It works well for all capital letters. Just install ImageMagick and make sure it is in your environment path. Include "legacy" commands in your installation.
MathType Word Document export using MathPage MathML
I need to convert the ms-word 2003 documents to HTML with MathML included if there are math equations. The quick solution I found at the moment is using the MathType addin to export the whole document into a HTML with MathML using its "Publish to MathPage" function. However, it couldn't do the conversion properly. Most of the equations in the document is still in the image format, instead of MathML. The strange thing is that it converts the commas into the MathML, not the equations. The original word document: https://dl.dropbox.com/u/4625393/test12.doc The key part of the converted html source: https://gist.github.com/katat/5091021 Is this a bug of the MathType?
Kata, I'm not sure what versions of Word and MathType you are using, but I was able to successfully create the MathPage with MathML. I am using Word 2013 and MathType 6.9. This is the page I created: http://dl.dropbox.com/u/17008533/187.xht Not sure what could have gone wrong with yours. It does seem that you chose an appropriate "target" for the MathPage; it looks like you chose XHTML+MathML. If you can give me some more details about what steps you're taking from start to finish, I'll try to help more. Also let me know what versions of the software you're using.
Converting d3.js SVG code to a standalone program — Example?
Either with a headless browser, google filesytem API, or some other way. This question says you can, but not how. Converting d3.js SVG code to a standalone program -- any suggestions? google groups has more hints, but no examples. I've spent a bunch of time playing with the node-canvas example, as well as the phantomJS svg example. I can't figure out how to make them play together. Apparently in Linux, the x-windows Javascript rendering engine isn't very good anyway. My API reading list of JavaScript, d3.js, SVG, CSS, and other HTML stuff is already mountainous - all I want to do is save a .svg image that I generate with d3.js. Help, please.
This will neither be easy nor overtly complicated. Main reason being is that a web browser alone cannot save an SVG file from a DOM rendering, unless it's Chrome version 12. Thing is that an SVG image is just a plain text file with a bunch of rendering instructions. The solution you point to basically says you would have to do this server side. Though they suggest node.js, you can do this in any server-side language you'd like. Trick is to take your JavaScript/HTML interface, make it either keep track of all objects you create, or otherwise be able to serialize all of them, and then send that data (ex: via ajax) to a server-side program which would reconstitute that to an SVG file and offer it to be downloaded. The challenge is that both your programs (client-side, javascript and server-side: php/etc.) will more or less have to re-implement SVG specifications to make this work and have common understanding as to how you serialized it for the transmission. There are virtually no stock components that do this for you.
There are some examples of using node().parentNode.innerHTML with 64B encoding, but I couldn't figure out how to use it. https://groups.google.com/forum/?fromgroups#!topic/d3-js/aQSWnEDFxIc The easiest solution I've found so far is FileSaver.js demo here: http://eligrey.com/demos/FileSaver.js/ It uses the HTML5 filesaver interface.
I came across this today, I've not tried it but perhaps someone will find it useful:
https://github.com/d3-node/d3-node
const D3Node = require('d3-node')
const d3n = new D3Node() // initializes D3 with container element
d3n.createSVG(10,20).append('g') // create SVG w/ 'g' tag and width/height
d3n.svgString() // output: <svg width=10 height=20 xmlns="http://www.w3.org/2000/svg"><g></g></svg>
convert svg to html+css
I want a converter to convert from svg format to( html + css ) <g transform="matrix(1.25,0,0,-1.25,0,15.56875)"> <text transform="matrix(1,0,0,-1,76.881,0)"> <tspan style="font-size: 7.87px; font-family: 'XITSMath';" x="0" y="0">N</tspan> </text> <text transform="matrix(1,0,0,-1,88.499,7.313)"> <tspan style="font-size: 7.87px; font-family: 'XITSMath';" x="0" y="0">T</tspan> </text> </g> Now what I want to do, is to convert matrix, x and y values to CSS attributes. For Example, T here is superscript and N is subscript and this is done by transform, x and y attributes AND I want to translate this sub/super script effect to CSS in HTML document. I have found a python script which called svg2css and another one which called svg2html, but I cant find any information about how to test them. This is svg2css script:http://sourceforge.net/projects/svg2css/files/ And this is svg2html script:http://jspoker.pokersource.info/jpoker-1.0.16/test-svg2html.py I have found this also, it seems to be a test code for svg2html script: http://jspoker.pokersource.info/jpoker-1.0.16/test-svg2html.py Hi friends, finally I have found a way to test svg2css python script, but it results in error message: I tried to use svg2css inkscape extension in python, which converts an svg file to its equivalent css+html, but it resulted in no output with a warning message: Source file C:\WINDOWS\Temp\ink_ext_XXXXXX.svg9EFDKV not an SVG. My svg file is very simple, it just contains one text tag, I tried to generate the css+html from these svg formats: plain svg inkscape svg optimized svg but all of these resulted in no output with same error message. This is the Error Log file generated in \Users\staff\Application Data\inkscape: Extension "Sketch Input" failed to load because a dependency was not met. Dependency: type: executable location: path string: skconvert Extension "LaTeX Input" failed to load because a dependency was not met. Dependency: type: extension location: extensions string: org.inkscape.input.sk I know that I should download these resources, mentioned in the error log file, and fix them, could any one help me to do this, or if there is another solution?
This only sort of works, but here you go anyway: https://convertio.co/svg-html/ This does technically do what it says it does, however, it just splits the content into text, and everything else. It might work with simple SVGs... Although with anything of any complexity it will completely botch it... As it doesn't split rectangles into divs, rather, it rasterizes everything except for the text, which might work in some scenarios... It didn't work for my purposes, as I built out a webpage layout style and was hoping I could just convert it into an HTML file and add some functionality, but it didn't work, I'll just have to hand-code it I guess!
This is not really direcly possible, as SVG is a graphic format (an image). In the same way that you cannot directly convert a jpg or png to HTML. Yes, it is possible to create tables with 1px cells that emulate an image, but I doubt this is what you are looking for. Update: Seeing as you only have text elements, you may be able to use XSL to transfrom your SVG to XHTML - you will need to provide your own CSS file, however (though, you might be able to generate that with XSL as well, depending on the contents of the SVG).