In my current project I need to print out one (or several) SVG graphics which are stored in different string variables. Each SVG must be printed out in a different page. How can I achieve that?
The reasons why I have SVG graphics as string variables is the following:
A 3pp library internally manages a drawing model and shows it in a HTML canvas. The drawing model can contain several pages (depending on the size of the model) but only one is shown in the canvas.
This 3pp library is able to return a JS string with the SVG graphic of the current page being shown.
A MUST of my application is to modify each SVG string to include a table with information.
Finally I must print each SVG (page) in a different page (paper sheet).
The option I've thought about is:
Place the contents of each string SVG in a new 'printable' HTML element and Use Window.print together with CSS printable options to print only those new elements.
However, this seems to be a very big 'workaround' and I don't know in advance if this could work.
Does anybody have better ideas? Any experiences?
Related
I have searched the web but the answers showing embedding the SVG into the HTML using <object>, <img>, etc. What I want to do is open a large SVG file that contains lots of images, find the image I need, and show only that image on the page. How can I do that?
File structure is:
directory
index.html
script.js
images.svg
A few steps:
Use the Fetch API to get the image data.
Use a DOM parser to parse the XML into a document.
Find the SVG subset you want. (You didn't show us your XML, but this is likely as simple as document.querySelector().)
Create an SVG element. (This is actually a bit tricky due to the namespace. See also: JavaScript createElementNS and SVG)
Append it to the relevant element on your page.
hello damn i think you can add svg in your html code and run code but you cant font-size svg in css you can use width and height in svg to big font-size ok under
I have an SVG image, parts of which I change dynamically depending on responses from an API call. One aspect I change is the colour of different elements within the SVG, which I can handle somewhat cleanly via applying different CSS classes. However there are also text elements that I would like to change.
I have this currently working by inlining the full SVG image into my component template and picking out the parts I wish to bind to the model. However, this means that any time I want to edit the raw SVG image I need to copy/paste the SVG markup back into the template and reapply these bindings.
Ideally what I would do is keep the SVG as an external file, then inline the SVG as part of the build process so I can avoid sandboxing (something I can currently do), but I also want to dynamically apply the data bindings via a selector (e.g. id/class associated with each SVG sub-element) after the SVG is inlined. Two solutions I've come up with would be to create a directive that would do some DOM manipulation to associate the relative elements with the values I want to set, or to modify the SVG tags in the build process post-inline to add the Angular binding syntax here. Neither option seems great to me.
Is there another way to do this that I'm missing?
I have a psd file with two text layers.
I would like to add a quote in the first text layer and a name in the second.
The data is coming from a csv.
The quotes can vary in length. The font size for the "quote" text layer therefor needs to be set to fit within the text box.
I tried scripting it for the better part of the day now and am stumped.
Thank you!
While it's not Photoshop, you might want to check out Templater for After Effects which lets you dynamically insert data into layers. Templater also comes with layout logic that allows you to determine the fitting of various lengths of text and resolutions of source images.
The data can come from a tabbed-separated value file or from a Google Sheets document. Even though it works for After Effects, you can use Templater to export still images from AE.
Learn more at http://dataclay.com
I have a web app that uses SVG files to map various sorts of data onto our underlying experimental dataset. Each SVG file represents a mapping of one type of data to the experimental dataset and, in most of the pages on the site, they are displayed one at a time, with the various nodes carrying tooltips to make the maps more informative and links to associated data.
I would like to add a page where maps can be compared side-by-side, which means having multiple self-contained SVG's all on the same page. When I do this, however, the files seem to step on each others' toes in that only the first SVG on the page displays the correct text in the labels and axes. The rest appear to inherit the alphabet used in the first image, leaving the axes and labels garbled and nonsensical.
The snippet below shows how I am currently embedding the SVG's in the page. The object blocks are loaded up with SVG content via javascript/ajax when the user chooses a map on a dropdown menu. Everything functions correctly except for the noted problem with the SVG text.
<object id="map" name="map" class="compBuild" width=800 height=460></object>
Javascript:
$(document).on("change", ".db_field", function(e) {
var tmp = this.name.split("_");
var field = "map_" + tmp[1];
$(document.getElementById(field)).load(getSvgUrl($(this).val()));
// getSvgUrl just makes a Jquery AJAX call to obtain the location of
// the SVG file.
})
Maybe not obvious from the code given, but what actually happens on the page is that the menus and object blocks are dynamically generated, so the actual drop-downs and object blocks are addressed as mapSelect_X map_X, where X is a number appended when the block is created. (code not shown for the sake of brevity!)
I am wondering if there is a workaround for this as I would rather not convert the SVG files to images, since I would lose the functionality in the SVG's. Any help would be appreciated. Thanks!
Check that there are no duplicate id attributes in the two SVGs. ids must be unique on the page, otherwise any SVG features that use id references (like <use>, gradients etc) can't be trusted to point to the right thing.
Since Chrome and FF handle duplicate ids differently, a quick way to check this is the cause would be to see if the two browsers render the two-svg page differently.
I have a type of word cloud that I developed. Its really just a simple database search result that applies random CSS styling (size, color, vertical layout, etc) to keywords to make it look pretty inside a div or single cell table. These keywords get retrieved via a PHP/mySQL function.
I would like to be able to output that DIV/table cell's (whichever would work better) contents along with the CSS styling to an image file. I've seen posts suggesting HTML2Canvas but haven't had any luck getting the search results with the CSS to show up in the image and not even sure if its possible in this case.
Any ideas to point me in the right direction?
Thanks,
You could use an html to pdf script, like this one, and then use the imagick php function to convert that to an image.
Source: http://buffernow.com/html-to-image-php-script/