We have done a visualization, mostly in D3 and we would like to generate a nice pdf of it to benefit from vector rendering rather than doing a mere screenshot.
It can be seen at:
http://www.bonneel.com/prot/prot2/
I also saw Sergiy's tutorial on producing pdfs out of D3 visualizations. However, his technique works if there is a single svg element (and I didn't manage to extend it to the multiple views we have), and actually produces a strange output in our case
See below for a screenshot of what it produces : the grey background is outside of the clipping area, and is just shown to illustrate that in addition to the view being incorrectly black (and doesn't show the entire visualization), it also extends outside of the clipping area with strange artifacts.
I understand that some elements might not be possibly converted to vector graphics (e.g., the 3D view), but having a screenshot that is mostly vector graphics would be nice (e.g., all the div elements that contain SVG shall be represented in vector format, and only the 3D view rasterized).
Any idea ?
Hopefully the SVG Crowbar can help you. I've used it before and it picks up most of the styles, though you have to read the warnings at the bottom.
Once you have your SVG image (with styles!) you should be able to open in Fireworks or Illustrator and export to vector PDF.
Related
I have a 4 page leaflet (in perspective view) designed with illustrator and exported as SVG .I have some text on each page of the leaflet , its too heavy for web rendering ,(as the text is converted to paths). so I decided to keep the base leaflet as SVG and find a way to simulate perspective in the accompanying text and match it to the leaflets perspective, I also found the scripts to make the perspective happen but as soon as I place (inline)the perspective text in the SVG code it acts in a very different way I've made screenshots of the end result I want to achieve so you can see what I mean.
desired end result image
i use foreignObject tag to implement html inside svg .
code i did and whats happening
Working on a D3, React, Redux web app and running into an interesting bug when rendering an SVG containing a bunch of rectangles.
Application Summary
We use a D3 Partition Layout to generate a huge (~3000) list of nodes to set the appropriate layout attributes (x, y, dx, dy).
We use React/Redux for the rest of the application to store this state and ultimately render an SVG for the chart.
Problem
Some nodes (rendered as rects) in the rendered SVG simply don't show up!
Theories
Originally, we thought we had a bug with how we were generating the rectangles, but this turned out not being the case (Rects exist in the dom with the right attributes).
We are rendering other things in addition to the rects, so we thought those were conflicting when the browser painted everything. That seemed to not be the case since we disabled all of these other items and we're still seeing the issues.
It could be a browser bug when it comes to rendering rects. Our app currently doesn't even render properly when on Firefox, so it may be something to do with how we are generating the SVG.
Example
Here are some examples of what we are talking about.
Here's an example of the chart being rendered properly with all of its nodes.
Here's an example of the chart rendering with part of its nodes missing:
Here's an example of the same chart magically breaking after we alt tabbed a few times:
Questions
What we're looking for is any ideas from people more experienced with SVG rendering for what we could be looking into. There are a bunch of possibilities, but we're not sure which direction we should be looking into.
Thanks!
I found website that i like, and i download the html source code
I have understand all html source except svg code in homepage can you explain this all numbers means?
you can just explain numbers meaning in svg tags. thank you :)
this is html source: http://1drv.ms/1FPR9Iw
Scalable Vector Graphics (SVG) is the description of an image as an application of the Extensible Markup Language (XML). Any program such as a Web browser that recognizes XML can display the image using the information provided in the SVG format. Different from a raster graphicsscalable part of the term emphasizes that vector graphic images can easily be made scalable (whereas an image specified in raster graphics is a fixed-size bitmap). Thus, the SVG format enables the viewing of an image on a computer display of any size and resolution, whether a tiny LCD screen in a cell phone or a large CRT display in a workstation. In addition to ease of size reduction and enlargement, SVG allows text within images to be recognized as such, so that the text can be located by a search engine and easily translated into other languages.
Being a vector graphics format SVG is mostly useful for vector type diagrams like:
Two-dimensional graphs in an X,Y coordinate system.
Column charts, pie charts etc.
Scalable icons and logos for web, tablet and mobile apps and webapps.
Architecture and design diagrams
etc.
so the number are co-ordinates for your shape
To know more about it and how it's useful and how we should use it please follow below links
you can read more about it Here and Here
Svg ( Scalable Vector Graphics) defines graphics in xml format. you can read more about it here: svg w3 schools.
I have trouble figuring out an issue I've been having with svg->font conversion.
Using Inkscape, I created a new svg (dimensions - 1000x1000) that has a shape star using the draw tool in the rectangular path create mode.
The path I used to create is this:
bottom left -> top center -> bottom right -> left top -> right top -> left top
Here's the created file: star.svg. There's no issue with this file so far.
Now, I've used fontcustom to compile this svg into a font, and you can look at the generated preview here.
This preview looks differently in Safari vs Chrome (or Firefox or Opera). But there's a filled area in all of them. You can check the preview link yourself, or here's the screenshots of how it looks:
Chrome:
Safari:
Why's this fill area coming in the first place? Why is it different in browsers?
A bit of context:
The actual issue is much bigger. I've a set of svgs created by someone in Adobe Illustrator, some of which are glitchy in similar fashion (unwanted fill) in chrome and other browsers. Safari and webkit2png somehow render the svg fonts correctly. So I tried to recreate the process in above mentioned steps.
More context:
I've also used icomoon app which many suggested, and it just gives blank glyphs for some reason.
In almost all cases, font glyphs are composed of filled shapes. They don't use the stroke (line). So when your SVGs are being converted to a font, the font SVGs are getting a fill applied, even if they didn't have one before.
The differences between browsers is probably explained by the fact that each browser may be loading a different generated font type. Eg. woff vs TTF etc.
The fix is to design your SVGs so that they only use filled shapes and don't rely on strokes (ie. line colour, width etc). If you follow the following rules, your glyphs should always work when converted:
Keep your line colour as "none" or "transparent",
Never use any fill colour except black (ie. don't use "white" to make holes)
Never let shapes cross over themselves or other shapes.
So, for example, in the case of your star, it should be designed as a filled star shaped object with a star shaped hole in it.
I have made a bunch of charts and tables which I have saved in png format for presentation as stimuli in a web-based experiment created with HTML / CSS / Javascript. How can I get them to look sharp when displayed?
Here's a sample of what they look like now when displayed in the experiment:
As you can see, the lines are jagged and sometimes even thin to vanishing, and the text has similar problems. I guess this is a consequence of the png images' "natural" sizes (about 3500x2500 pix) being larger than their display sizes (about 200px high), but I feel there should be some way to fix this at display time without manually resizing all the images.
Here's some history: these were all made in Excel, then copied to Powerpoint and thence saved as images. Originally I directly saved from Powerpoint, which defaulted to .jpg format and came out fuzzy. Then I tried saving to .emf and used IrfanView to resave as .png. The resulting pngs are extremely sharp when viewed in their natural (large) size through whatever image viewer, but when I embed them in html at a much smaller size, they look pretty bad as shown above.
Do you still have the excel file? If so you can:
Export your charts as pdf files in excel;
Then import the pdf's into a vector program such as Inkscape;
Save as svg and then reference the svg files like you would do with an image
tag(you can also embed directly)
When importing as a pdf they will be vector graphics so you can edit some points further if needed.
It's hard for a line on the screen to look good with a less that 1 pixel thickness.
So let's say you have elements 3 pixels thick on your image. After resizing to 250 X 250, they would be 0.3 pixels thick -> not good.
That what creates the undesirable effects you described at line edges and corners.
To address that problems I see three potential solutions:
Make an other copy of the images with lower resolutions from the original source (like screenshot of the Excel charts, or any other features that allows you to get a low resolution bitmap)
If you have the numerical data displayed on the charts and time to learn a cool technology, you can use a charting library. This way you would get the prettier rendering, because it would be vector drawings. Example: HighCharts
Last and far worse solution: work on the images with an image editor and the appropriate skills to increase the thickness size of all sharp elements, like lines, dots, arrows, etc...