WebVector is an HTML to SVG, PDF or PNG convertor. It converts a HTML document into a vector image in SVG format or a bitmap image in PNG format. The Standard Vector Graphics (SVG) files can be further edited by a variety of vector graphics editors.
Home Page: http://cssbox.sourceforge.net/webvector/
License: GNU Lesser General Public License v3.0
I have some HTML that includes the in the <style> element
.grpdescr {
font-size: 12pt;
font-style: italic;
}
In the HTML there is
<br>DUNCAN, king of Scotland.<br>MALCOLM<br>DONALBAIN<br>
<div class="grpdescr">...his sons.</div>
<br>MACBETH<br>BANQUO<br>
<div class="grpdescr">...generals of the king's army.</div>
But the SVG for grpdescr looks like
<text x="8" y="173" width="66" height="16" style="font-size:16px;font-weight:normal;font-variant:italic;font-family:Serif;fill:#000000;stroke:none">...his sons.</text>
when I would expect
<text x="8" y="173" width="66" height="12" style="font-size:12px;font-weight:normal;font-style:italic;font-family:Serif;fill:#000000;stroke:none">...his sons.</text>
I'm using 3.4 on the command line.
Hi,
I am trying to convert an HTML doc to SVG using WebVector. The HTML itself was generated from a PDF file using the pdf2htmlEX command.
This is the command I ran:
java -jar webvector-3.5.jar file:///full/path/to/indesign.html indesign.svg svg [testdata.zip](https://github.com/radkovo/WebVector/files/4196130/testdata.zip)
As you can see in the attached files, the SVG breaks quite badly. Any suggestions on what could be going wrong?
The web above renders as below, I don't know why
I'm trying to convert a file containing the following html to a SVG or a PNG:
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/></head><body><!----><!----><!----><!----><table border="0" cellpadding="0" cellspacing="0" style="background-color: #fff; border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 15px;" class="ng-star-inserted"><thead><tr><td style="text-align: center; color: #1a96b0; border-bottom: 1px solid rgba(0, 0, 0, 0.12); padding: 8px" colspan="2"><b>Royal Caribbean - Mystery Shop 2019</b> Alternative Companies<!----><i class="ng-star-inserted"> Celebrity X Cruise</i></td></tr><tr><th style="border-bottom: 1px solid #1a96b0; border-right: 1px solid #1a96b0; "></th><!----><th style="border-bottom: 1px solid #1a96b0" class="ng-star-inserted"><div style="padding: 8px; text-align: center"><span style="font-weight: bold; color: rgba(0, 0, 0, 0.54); font-size: 12px">Travel Mystery Shop</span><!----></div></th><!----></tr></thead><tbody><!----><tr class="ng-star-inserted"><td><div style="padding: 8px; text-align: center;"><!----><p class="ng-star-inserted"><img style="max-width: 80px; max-height: 80px" src="https://s3-eu-west-1.amazonaws.com/storechain-logos/store_types/travel_agency.svg"></p><span style="font-weight: bold"><small>TRAVEL_AGENCY - GB</small></span></div></td><!----><td class="ng-star-inserted"><div style="padding: 8px; text-align: center; font-size: 24px"><!----><!----><!----><span class="ng-star-inserted"> 4.54% </span></div></td><!----></tr></tbody><!----></table><!----></body></html>
The resulting image does not display the content image (https://s3-eu-west-1.amazonaws.com/storechain-logos/store_types/travel_agency.svg). But everything works if I use another image format, such as a PNG:
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/></head><body><!----><!----><!----><!----><table border="0" cellpadding="0" cellspacing="0" style="background-color: #fff; border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 15px;" class="ng-star-inserted"><thead><tr><td style="text-align: center; color: #1a96b0; border-bottom: 1px solid rgba(0, 0, 0, 0.12); padding: 8px" colspan="2"><b>Royal Caribbean - Mystery Shop 2019</b> Alternative Companies<!----><i class="ng-star-inserted"> Celebrity X Cruise</i></td></tr><tr><th style="border-bottom: 1px solid #1a96b0; border-right: 1px solid #1a96b0; "></th><!----><th style="border-bottom: 1px solid #1a96b0" class="ng-star-inserted"><div style="padding: 8px; text-align: center"><span style="font-weight: bold; color: rgba(0, 0, 0, 0.54); font-size: 12px">Travel Mystery Shop</span><!----></div></th><!----></tr></thead><tbody><!----><tr class="ng-star-inserted"><td><div style="padding: 8px; text-align: center;"><!----><p class="ng-star-inserted"><img style="max-width: 80px; max-height: 80px" src="https://storechain-logos.s3-eu-west-1.amazonaws.com/7_Eleven.PNG"></p><span style="font-weight: bold"><small>TRAVEL_AGENCY - GB</small></span></div></td><!----><td class="ng-star-inserted"><div style="padding: 8px; text-align: center; font-size: 24px"><!----><!----><!----><span class="ng-star-inserted"> 4.54% </span></div></td><!----></tr></tbody><!----></table><!----></body></html>
I've ran into a similar issue while trying to use cssbox directly. It's using ImageIO to read the images, so you might need to add a dependency to com.twelvemonkeys.imageio:imageio-batik to your project for it to work. Hope it helps :-)
hello, i want to show a table has borders, but in rendered svg, png or pdf, border is not being shown. for example <table><tr><td style="border:1px solid red;"></td></tr></table>
Thanks in advance.
There is and error with website over https, can't convert it
My system is a pop-os (debian) linux distribution.
Webvector does not show any errors, but the conversion is not working at all.
As a test, I saved this website and tried to convert it to svg, here is the result:
Some remarks:
Any idea what I might try?
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.
