This SVG originated from HTML5 canvas. Which looks fine and I added images that are represented in dataurl form to avoid CORS issues.
However, when opened in chrome the image showed up fine
When opened in Adobe Illustrator, the image did not show up.
When opened with macOS preview app, the image did not show up.
I looked up SVG2 specifications for using dataURL in svg's <image> tag href attribute and they said its okay to use. So I don't understand what is causing this rendering discrepancy between different viewers.
File for reference
In short, what is the standard way to embed images into SVG.
Okay I found out it is because only Chrome supports the newer SVG2 standard href attribute on <image> element of SVG. So I just needed to replace the href with xlink:href
Even though xlink:href attribute is deprecated in SVG2. It seems the other softwares aforementioned in the question are not SVG2-compliant.
Related
I want to convert an HTML page written with Vue.js to a vector-based PDF client-side. I understand there are solutions in the backend, however, in my case I specifically want client-side. I have very complex Vue components and styling which I would like to print to pdf. I tried multiple approaches and I could not find a solution.
Here is what I tried: -
The easiest way I found is window.print().
The issue with this approach, is that there is no other way to invoke the download functionality directly without going through the pop-dialog. Another issue I found window.onafterprint and window.onbeforeprint event listeners don't work on firefox but work in chrome. In firefox, both events fire at the same time. regardless, I do not like the default dialog, I would rather build my own.
I retrieved the HTML and CSS from the DOM using this.$el.innerHTML, and window.getComputedStyle(element) and saved them to a variable, then converted to blob and downloaded it with javascript.
this solution worked, however only in DEV build, since I bundle my app with Vite, the computed styles don't render on the DOM as I expected when in Production build; which I believe is due to the way Vite bundles CSS for optimization. Therefore the result will only be HTML with no styling.
I used the popular vue-html2pdf library and it is straightforward.
the issue with this approach is the fact it simply renders HTML and CSS to an image the saves as a pdf, therefore the output will be an image-based-pdf. which is not my preferred kind of pdf.
I cannot find any library that takes in HTML and CSS and covert to a Vector-based pdf on the client-side.
If you open Chrome or Edge and visit a page with a flexbox layout, like this one, and choose Print/Save as PDF, the PDF includes the flex elements in the proper location. However, if you use Playwright and the Page object's pdf() method, flex elements are missing.
I'm fairly certain this isn't a bug with Playwright, or Puppeteer, but instead is an issue with how the headless chromium creates the pdf. Or, hopefully, it's some kind of option I'm missing somewhere. Does anyone have experience creating PDFs of pages with flexbox layouts using Playwright?
I had a similar issue where the height of the elements inside my flexbox was completely wrong in Puppeteer.
I was able to solve it by using display: inline-flex instead of display: flex
Title says it all. I'm developing a Vue app that is going to be used as a display for my instance of Home Assistant. I tell it what JS file to load and what tag to use and HA puts it inside an iframe. The font I'm using is an otf file.
It seems like my component can only use the font when it gets included in the page's section. Since I'm not generating the page or the iframe, I can't add anything to the head. The only thing I can figure out to do is use JS to add the font face to the head after the page is loaded. I've seen a react component do this. Is there a build option or something?
But it is my understanding the whole point of web components is to be able to include a single JS file then use the component. Does this not include fonts or other resources?
How can I add watermarks on Phantomjs images?
Somewhat like this:
Can page.evaluate help me here?
Any injection or while rendering should not affect the actual look of the webpage. This stamp should only overlay.
The rendering is very high level in PhantomJS. The only way is to inject the watermark as an element (think position: absolute) into the DOM through page.evaluate and remove it after the screenshot.
Finally got it.
Created a new html element which is required, from DOM method and then injected this while rendering the HTML by page.evaluate.
I have a large PDF and I need to show it 50% reduced in size inside a div tag that is 600px 600px in size. I also need to offer the client a zoom function.
Should I use the "object" tag? But can I reduce the pdf size inside an "object"?
Is there a jquery example or anything out there?
Need help.
<div>
<object data="febrero2012.pdf" type="application/pdf" width="600px" height="600px">
alt : febrero2012.pdf
</object>
</div >
I coudn't find the way to set a default zoom level yet. If you find a way, please let me know.
No. PDFs cannot be displayed in a DIV, as they're not html or an image. You can convert the PDF to html/images on the server and display that, just like google's "quick view" function does. But in general, PDF rendering in-browser is dependent on the presence of a plugin (e.g. Adobe Reader, Chrome's built-in rendering engine notwithstanding). Plugins can't be displayed in divs, just embed/object/iframe sections.