I'm using eKoopmans HTML2PDF on github
This is my example, my project involves using SVG and I need to display a PDF page with svg on all browsers.
Currently the SVG is not showing on Internet Explorer if you open the link on IE.
is there a way to fix this?
<div id="element-to-print">
SVG won't work on internet explorer, only google chrome
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</div>
Related
I'm developing a UWP app on visual studio, and learning through the process. I'm having a problem with the icons of the navbar and svg files. First I tried my custom icons as PNG files, there was no problem, the icons were displaying correctly. Then I decided to use SVG for quality porpuses and create the same icon as SVG from a PNG file. But for some reason it is not displaying at all.
This is my XAML:
<NavigationViewItem Name="AdminTest" Tag="Profile">
<NavigationViewItem.Content>
<StackPanel Orientation="Horizontal" Margin="-15,0,0,0">
<Image Source="/Assets/test.svg" Width="40" Height="20
"/>
<TextBlock TextAlignment="Center" Text="AdminTest"/>
</StackPanel>
</NavigationViewItem.Content>
</NavigationViewItem >
And this is were the icon is supossed to be:
The svg is added in my solution and before when it was a png it worked fine, any idea what im doing wrong?
Why my SVG file is not displayin as source of my Image tag in UWP/XAML?
The problem is your svg image has specific width and height property. please edit your svg image content and find width and height property and delete them.
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
id="svg4236"
version="1.1"
inkscape:version="0.91 r13725"
height="200" //delete height
width="200" //delete width
viewBox="0 0 200 200"
sodipodi:docname="MallowNinebark.svg">
<metadata
I have noticed that when I use Apache Batik to transcode SVG documents to PDF's that have an opacity set to less than one Batik will create a raster version of the SVG and place it in the pdf instead. When dealing with print this is not desirable. Is there any reason Batik does this? Is there anyway to avoid this flattening of SVG documents regardless of their opacity?
Our code to create the transcoder:
PDFTranscoder pdfTranscoder = new PDFTranscoder();
pdfTranscoder.addTranscodingHint(PDFTranscoder.KEY_PIXEL_UNIT_TO_MILLIMETER, PIXEL_CONVERSION);
pdfTranscoder.addTranscodingHint(PDFTranscoder.KEY_AUTO_FONTS, false);
We then take the SVG which is returned form element.getEncodedData() as an SVG string.
TranscoderInput input = new TranscoderInput(new ByteArrayInputStream(element.getEncodedData().getBytes()));
TranscoderOutput output = new TranscoderOutput(byteStream);
pdfTranscoder.transcode(input, output);
For opacity we edit the SVG adding a group. Consider the following svg: Note many markup tags have been removed to keep the example concise:
<svg>
<rect x="100" y="100" width="100" height="100" />
</svg>
We would edit this SVG to appear as
<svg>
<g opacity="0.5">
<rect x="100" y="100" width="100" height="100" />
</g>
</svg>
Is there a way to use an icon in a binary file (DLL for example) as an image in an HTA? I tried this, but it doesn't work:
<img src="mydllfile.dll,2" width="32" height="32" border="0"/>
Is it possible to show a pdf file in modalpopup with icefaces. Tried this but does not seem to work. Am new to icefaces too.
<ice:panelPopup autoCentre="true" visible="#{popup.visible}" modal="true">
<f:facet name="header"/>
<f:facet name="body">
<OBJECT DATA="/ICEfacesDevelopersGuide.pdf" TYPE="application/pdf" WIDTH="100%" HEIGHT="100%" />
<ice:commandButton value="Close" action="#{popup.close}" />
</f:facet>
</ice:panelPopup>
I ended up doing it the old way opening it on a new window or tab using output link and target attribute.
I'm having problems with Webkit browsers (e.g., Chrome, Safari) and changing patterned fills in SVG objects. The example below tries to toggle the fill of a rectangle between a solid red and the google logo on hover:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" width="275" height="95">
<image xlink:href="http://www.google.com/intl/en_com/images/srpr/logo3w.png" x="0" y="0" width="275" height="95" />
</pattern>
</defs>
<rect id="rect" width="550" height="190" style="fill:url(#img1);stroke-width:1;stroke:rgb(0,0,0)">
<set attributeName="fill" from="url(#img1)" to="red" begin="mouseover" end="mouseout"/>
</rect>
</svg>
In Chrome/Safari, the rectangle correctly fills the rectangle with the google logo pattern on load. On mouse over, the rectangle fill switches to red. On mouse out, the fill appears as white rather than swapping back to the google logo.