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
Related
I get strange behavior when I try to insert icons to my elementor page design in SVG format.
This is the original design (supplied with zeplin.io) which im trying to implement with elementor
before I add the last icon, the result in elementor is:
You can see that only the first icon display as expected
Which is strange, but even more strange is that when I had the last I con I get this:
Now non of the icon display as expected, although some of then are more similar to the expected result.
The heart icon got flipped, and the colors changed for the other icons,
Why would adding a new icon effect other icons in such a way?
Why the color and the icon direction doesn't display as set by the SVG design?
NOTE, the direction might be RTL related, but why only the heart got flipped?
I know that I could easily solve this issue by changing the format to PNG, but I could like to understand the reason behind this behavior.
This is happens because the icons have duplicate class values, i.e. the svg is added as-is to the dom tree, along with the <style> definitions.
Therefore any class or id that is duplicated in two SVGs will collide, and the solution is
open the svg with any text editor
search/replace all id/class defined in <style> to have unique name
NOTE: the reason it doesn't happen in the orginial design is that there, the SVGs are added with img tag.
Woprdpress doesn't allow uploading SVGs as images for security reason (I have no idea what kind of security issue it can create, but this is a question by itself)
EDIT: I just noticed that once you add an SVG as an icon, it also become available as an image, so it might be a better solution to upload the SVG as icon and then use them as images. but I didn't try it.
I just started to learn svg. One thing perplexes me is I find some site use svg/path to draw a text logo. Like this one:http://www.desiringgod.org/
The logo is pretty simple itself, however, the SVG it is using contain a horrendous <path> tag where there are lots of numbers.
I understand that with SVG we can scale the logo, but I don't see any difference if this logo is based on a .png file. So what really is the benefit?
Secondly, I don' think something like
<path d="M115.326252,8.93098333 L115.326252,16.3798167 L113.923083,16.3798167 L113.923083,14.96265 L113.878305,14.96265 C113.092947,16.0569833 111.560896,16.5939833 109.858654,16.5939833 C106.367752,16.5939833 103.855367,14.0609833 103.855367,8.63131667 C103.855367,3.20098333 106.367752,0.667483333 109.858654,0.667483333 C112.454152,0.667483333 114.454146,1.91331667 115.390858,5.21765 L113.771894,5.53931667 C113.007521,3.07148333 111.7296,2.12731667 109.943088,2.1273166 ....</path>
is written by human being. This must be generated by something, isn't it?
The benefits of using SVG logos over PNG logos are the following:
Scale to any size, perfect for responsive websites.
Look sharp on retina displays.
Don't lose clarity, except for very tiny sizes (same with PNG).
With PNG files you would most likely need to generate multiple resolution versions of the same image and hope that the original image is large enough to support the future display resolutions (8K for example).
And yes, the path is not written by a human being. It's a standard part of an SVG file. You could also do stuff like export SVG files as HTML5 canvas code with an ink2canvas extension in Inkscape.
Advantages of SVG:
Resolution Independence
Super-Accessible DOM Node-Based API
No Unnecessary HTTP Requests
Easy Interactive Scripting
Read more details on: Why Aren’t You Using SVG?
In here, I will describe some differences between using SVG and PNG from an application perspective:
SVG files are lighter than PNG files when deployed to your
application.
PNG is more efficient as far as UI responsiveness since the file is
already within your application, and there is no scaling needed, but it's heavier than your SVG file.
PNG gives a better focus to photographs or detailed images than SVG.
I personally use SVG for icons and logos and PNG for photographs or detailed images.
SVG offers a way to do full resolution graphical elements, no matter
what size screen, what zoom level, or what resolution your user's
device has.
So you write HTML? JavaScript? CSS? Good. Then you already know a lot of what you need to know to get writing SVG.
SVG actually uses an XML-compatible format to define its rendering shapes. Beyond this, you can actually style shapes in CSS, and make them interactive with JavaScript. Multiple JS libraries exist to assist you in this world, like D3.js and Raphael. Here's an example of an SVG element group (the Envato leaf).
The other benefit of SVG is,
When you use images in an html document with the tag, you are defining a file that the user's browser will request. This request will take up bandwidth and require more precious time to download. If your image is instead a set of dom nodes, it cuts that extra HTTP request out, making your website faster and more user friendly.
An SVG XML document of any complexity looks relatively archaic and complicated, and seemingly isn't nearly as easy as just using an image.
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.
Starting out with a given image, I would like to be able to trace polygons on the image and then export the result as an HTML image map.
What would also be nice is to be able change the scale of an existing image map, thereby changing the size of the polygons and shapes.
Is there a program that anyone knows of that has these features?
Many program do this. It is to time consuming doing complicated maps manually.
I know coffeecup is a used tool for this.
What would also be nice is to be able change the scale of an existing image map ..
I wrote a Javascript image map resizer, it's here. Just paste in your HTML and it will return the scaled image map. You must include "height" and "width" attributes for the original image in the HTML. (This is a quick and dirty tool, it doesn't actually do anything other than parse the HTML you've pasted in. It uses those attributes as the base of calculations).
You may also be interested in my jQuery plugin ImageMapster which can resize image maps dynamically among other things.
I use this site it's fairly good for quickly making image-maps
I use this site https://www.image-map.net/ to trace polygons on the image and then export the result as an HTML image map.
I have a page with a series of divs. Each div represents a slide in a slide deck. I need a series of thumbnails, one for each slide. Ideally these thumbnails would be rasterized versions of the slides: a PNG data: url would be perfect. I'd like the work to be done in the browser, and I'm okay with things that only work in one of the modern browsers (e.g. chrome, or firefox). I suspect this is impossible, but would love to hear otherwise.
The method toDataURL() on the canvas object is essentially what I want, but the divs in question aren't instances of canvas, so that won't work.
One solution can be to render HTML to a canvas by embedding the HTML into an SVG image as a <foreignObject> and then drawing the resulting image via ctx.drawImage().
Read the article on MDN here, or take a look at rasterizeHTML.js which is an implementation of said approach.
The limitations are that your content should all be same-origin clean (i.e. accessible by AJAX).
Disclaimer: I am the author of rasterizeHTML.js.
It isn't possible on the client side as this is forbidden to protect from potential frauds like for ie script that would take a screenshot of your page with some private data and send it god one knows where.
Although...
it is possible to copy whole HTML to use it as a thumb preview/whatever and use CSS3 transformations (scaling) + add overlay over it to prevent interactions/text selection etc to mimic a thumbnail of a div.
and there was an option in firefox/chrome extensions to save page to an image - though not sure if it was possible to take only part of the page as an image
or you can always do like google does on its search results page with their page preview (click the magnifying lens near the result title) - have a robot machine which enters the page and takes a screenshot of whatever to produce the preview of the page using this data - don't know how much you WANT to do that but if you wanted it that bad... :)
I'm afraid there is no easy way to do what you want and the CSS3 trick one seems to be the easiest one to pull of.
you can rasterize html to a <canvas> element in javascript with the rasterizeHTML library:
http://cburgmer.github.io/rasterizeHTML.js/