Reversing SVG Path Fill to Plain Text - html

When looking through the source code of a local website I found a spot within it where instead of just outputting text they drew it with SVG and path fills. I'd like to parse this SVG data and convert it to plain text. I've seen many tutorials on how to convert text to SVG, but not the other way around. Here is a snippet of what is on the site:
<path fill="#ffffff" d="m40.924747 11.631161l4.0 -0.234375q0.140625 1.015625.....
Obviously the browser is able to parse it and render the text so I should be able to, too.
Thank you for any pointers!

Related

Where is this base64 code in my game coming from?

I made a game called 2048 Bitcoin and at the fully bottom, there is a base64 text saying eFd3R0JJVFlEd0JjMzRTYXE2REhFR2t1NENldEJTbXE=. When I write a paragraph at the end, the text is above the base64 code in case you want to know.
I have done an advanced search on my code trying to search where this is coming from, but I had no luck.

A quick look at the HTML file shows what is causing it. At the bottom of the file, before </body> the base64 string. source code

Including a clickable svg file in an HTML document

I have a formation homework to do, consisting in working with a "WORLD" database with cities, countries and languages tables. I want to point out that I don't need this to validate the module, it's just personnal enhancement of my project. I can do (and have already done) it with a classic map area, it's just that I want to work some more interesting options.
One of the items is making a clickable map of the world to generate accesses to the database. Well, I followed this link to do this with this Wikipedia file. There is in this file everything I need... Except that I don't know how to insert it to have full control of its features.
It is said in the tutorial that I should include the file inside a div, like this :
<div class="svg-container">
<?php echo file_get_contents("World Map.svg"); ?>
</div>
this works fine. Then I have to include in the svg file a "class" statment :
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
width="2754" height="1398" class="svg-content">
Problem is, when I do this, the image disapear :-(
I have tried a huge number of methods, for example including the file in an img (don't have access to the intern features of the svg, for example the links I would add), an object (image is all black, and the css part is typeset above the image...), nothing works, and the image itself doesn't scale correctely...
Could anyone help me use the map in my project ?
Thanks in advance.

SVG rect to path [duplicate]

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>.

What is this image stored as?

I want to extract these telephone numbers from the website, either as an image or if possible as a string.
Here is an example from the website: Link
As you can see the telephone number is an image.
However I cant seem to view the image when I open the image source:
<img src="http://www.callmyname.sg/search/display_phone_number/VUhkVE1WOW5BV1lFWWxSbVhUdFRObGMzQlRBRU9nPT0=">
But when put into html and viewed in a browser, you can see the image fine.

It's a solution to prevent people like you from scraping their website :)
The url http://www.callmyname.sg/search/display_phone_number/VUhkVE1WOW5BV1lFWWxSbVhUdFRObGMzQlRBRU9nPT0= leads to a script that generates the image - probably based on the argument.
VUhkVE1WOW5BV1lFWWxSbVhUdFRObGMzQlRBRU9nPT0=
Since it ends with an equals sign, I tried to decode it as base64:
UHdTMV9nAWYEYlRmXTtTNlc3BTAEOg==
Now it looks even more like base64, so I tried another round:
PwS1_gfbTf];S6W70:
So it's clearly not plaintext (or not encoded with base64), which would be ridiculous and would let you extract the number this way. They either use some special cipher, or store the numbers in database with this as identifier.
I don't think you can steal the phone number easily, only using OCR perhaps.
When you visit the URL, you will get garbage, since they do not send proper MIME header
�PNG IHDR�,���tRNS���7X}4IDATx���_HZo�g�� E��p��l��EHTx!]�DtQ�M�.x3��.dx�*b]Dl"]�D���bQq.B����Z2$��:ȡ�wq��9�s���Cx>W�}���ٳ��ڶ����]���Ǐ�/_���ݿ���ahh���\q����������555�=���*�"�*�*�f�����}uu�e�d2���o����?00p����J%ȴds���BB�˲�`�`0RJy����n�{cc�e�H$b�ۻ����(�~�_����A4�Z��_�V|��J�w�����t:��333.��ƕ������+^����L`���֑��W��3�X�" y���$p'U"��F���y���z&�ioo��萟�*� ����\�L&Sx����p�e���ׯ_R��y�J%�~����|qq��|e�Z%:�J�{��q��nW�ՉD"�J��~�n4��������̔Ty���qF���>BwGa�z����������8��ߡc�f��B�>!�Ub�N�s���|�F�^/B���Lj��i��NfJ��͛D"����� o!t��`����fvv�eم��V���D)�����x���d2966&�n� ^,0O4��(!D��l�h46�-�~��Tً>B�"�Q�>,�P��ok#U \�BU,�P���=G SA+GIEND�B`�
but it's really just ordinary PNG image:
img http://www.callmyname.sg/search/display_phone_number/VUhkVU5scGlBV1lDWWdFelVEUUhZQWRvQlRZR013PT0=

It's a PNG image, but the server doesn't specify the right content header. It tells your browser that is't an html page in UTF-8 encoding, so you just see some garbage (including the letters PNG at the start).
The <img> tag though doesn't know how to display text so it just tries to load it as an image (and with success).
I don't see a way to extract the numbers in any other way than just reading the image. Because it contains only numbers and will have a similar format all the time, maybe you can find a simple way to parse it instead of using a full fledged OCR library.

It's actually a png-file, generated by a computer before being displayed. You can reference it fine from any other page though, and you should also be able to download it easily (right click, save as ...) Note: I tested this, make sure you save the image with the extension .png and not .html which it will default to.
<img src="http://www.callmyname.sg/search/display_phone_number/QkNOVE1RODNBV1lDWWdVM1V6ZFZNZ1JyRFQ0Rk1BPT0=">

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).