How does Safari determine what size to output an svg in the following scenario;
SVG code
viewBox 0 0 800 800
height 100%
width 100%
css
svg width 100%
containing div width 60%
Safari outputs a much smaller svg than the 60% of screen, ok this is a bug. But what determines the size of this smaller svg, it has no connection to anything I can think of.
Just to give some background info. Safari needs both width and height in px for it to do what you want. % don-t work. But it does output the svg, and so it must make a decision somewhere about its size.
It's not a bug you're seeing. That's the correct behavior. The browser by default scales the SVG viewbox (careful with the terminology now, we're not talking about the browser viewport) to fill the CSS-determined dimensions of the SVG element. The fill behavior is determined by the SVG preserveAspectRatio attribute. By default it's set to meet, which keeps the whole SVG viewable, and the aspect ratio preserved. The alternative is slice which scales the viewbox up to cover the element, even when that means cropping. (slice behaves similarly to background-size:cover in CSS3.)
What you need to do is:
a) Don't declare explicit height or width in the SVG file. If your graphics editor is generating them, just go in by hand and delete them. According to the spec, if no width and height are specified, a value of 100% is assumed, so your pseudocode is redundant at best.
b) Make sure you're setting an explicit height for the svg element in CSS. I recommend developer or Canary builds of Chrome for troubleshooting responsive svg sizing, as there is a bug in Chrome 18 Dev Tools that has since been fixed. Once you've got it working in Chrome, it will almost certainly also work in Safari.
c) Figure out how you want to set preserveAspectRatio and manually edit the svg to put in the declaration.
If you're still having trouble, please post a jsfiddle. It's much easier for other people to comment on.
Related
Every time the window is sized from big:
http://res.cloudinary.com/liberationfront/image/upload/v1497626018/vb1_t29xlz.png
To small:
https://res.cloudinary.com/liberationfront/image/upload/v1497625905/vb2_gtmjrl.png
There is all of a sudden a gap.
The problem is likely that your images don't all have the exact same aspect ratio, so some of them end up a pixel taller than others in some cases. Then the floated columns don't clear properly.
You can either re-crop your images, which is a fragile solution since you then rely on all future images being perfectly cropped, or you can set your cards' height through CSS and let the images flow to fit. Often using background images gives much more flexibility.
I suggest looking into Bootstrap's responsive embed and setting your images as backgrounds on a child element. Create your own 1:1 class if needed.
I find great support for very small edge width and node border width, very useful when we zoom in deeply:
cy.edges().style({"width": 0.01})
cy.nodes().style({“border-width”: 0.01})
but font-size is less malleable: any font-size less than 1 appears to be clamped to 1. Thus the last three of the following commands, executed from the javascript console, produce the same result:
cy.nodes().style({"font-size": 10}) // big font
cy.nodes().style({"font-size": 1}) // much smaller
cy.nodes().style({"font-size": 0.1}) // unchanged
cy.nodes().style({"font-size": 0.01}) // unchanged
In each case (using the last as an example) the font-size property seems to be properly assigned:
cy.nodes().style("font-size”) // “0.01px"
But the rendered node size remains at 1. Any ideas?
Thanks!
Paul
This has been answered on Github. This is an issue that some browsers have, and there's nothing that can be done in the library to change the browser's behaviour
--
Copied from Github : https://github.com/cytoscape/cytoscape.js/issues/1173
This is a limitation of how browsers implement font rendering in canvas. There's nothing we can do in this case on the library side.
The only suggestion I have is to scale up your styles. Multiply your sizes by a factor such that the font size is at least 1px. While font sizes can't scale, the zoom level can scale arbitrarily. Your zoom levels will be different, but zoom is just a relative measure anyway.
I am trying to use PhantomJS image capture to capture the image of the browser.
Each time I run the image capture function, the dimensions of the image is slightly different. Example, once I get 1400x5185, if I open the same url after few hrs, I get 1399x5185 or 1400x5186.
I have tried croping from left top corner, but then pixels are slightly skewed.
Note:The content of the page is always constant
How do I always ensure that I get the same dimension of image without copping the pixels?
Something probably changes on the page, otherwise there is no reason for PhantomJS to render different images.
You should check the differences of the images in detail. Ads are probably the culprit when they are not uniformly formatted. If you identified the changing DOM elements, you can use casper.evaluate() to access the DOM and remove/hide those elements before capturing the screenshot.
You could also change the viewport size to 1920x1080 for example using casper.viewport(). If the page is vertically scrolling, then only one of the y-direction might change. If you want to be sure, then change the viewport size to 1400x5187.
I'm working with documents, so maintaining the the original image dimensions and subsequent dpi is important.
The aspect ratio is always maintained so the automatic fill modes and alike don't seem to have any effect.
Say I have a 300 dpi document and the user want to clear an inch border around the image. So I need an inch cropped from the image but the result needs to be the original image dimensions (2550x3300).
I have been able to achieve this effect with...
...&crop=300,300,-300,-300&margin=300,300,300,300
This works, but seems more than a little clunky. I've tried a lot of other combinations but they all seem to enlarge or reduce the image size which is undesirable in my case.
So does someone know a simpler syntax to achieve the desired result, or do I need to re-size the image then calculate and fill with a margin as I'm doing now.
Thanks
It turns out that my example requests the image in it's full size which turns out to be a special case. When I introduce a width or height into the command line things don't work very well since crop size is in respect to the original image dimensions and margin size is in respect to the result image.
Thinking about it more I abandoned the crop approach. What I really needed was a way to introduce a clipping region into the result bitmap. So I built an extension to do just that. It works well as it doesn't interfere with any of Resizer's layout calculations and the size of the returned image is whatever the height or width were specified as. Which is just what I needed. The Faces plugin has an example of introducing a clipping region.
Karlton
Cropping and re-adding 300px on each edge is best accomplished exactly the way you're doing it:
&crop=300,300,-300,-300&margin=300
What kind of improved syntax would you expect? This isn't a common operation.
I have an app which creates a basic svg tile which is about 300 x 150px. I need to duplicate this tile, such that I can create a nice printout on two A4 pages, or a single A3 page. So, basically, I'm just doing page layout 101, in svg rather than Photoshop/whatever.
Can anyone give me any pointers on how to start this? At the moment, I'm doing it very naively:
set a large canvas, of about 1500 x 1500px
duplicate the tile 4 x 6 times in JavaScript
print from the browser
This is more-or-less passable, but doesn't look good. Would it help to set up a canvas with a physical size of an A4 page? If I do this, I then have the problem that the tile is a complex graphic which I have currently created using pixel units. Even if I do this, the browser will presumably ignore the canvas size anyway. Or should I convert to pdf first? If I do this, I still need to work out how to set up an svg 'page' that will convert well to pdf. And do any tools actually support the svg 1.2 page stuff?
Note that I can't use Inkscape, since my svg code is entirely JavaScript.
Don't use canvas for this!
The point of SVG is scalable graphics. You can just scale the SVG yourself in the browser and then print from there.
If you want to scale SVG then all you have to do is either apply a CSS scale:
http://jsfiddle.net/simonsarris/xYZyf/
Or an SVG scale:
http://jsfiddle.net/simonsarris/xYZyf/1/