I have an SVG that needs to be opened in a container of variable size but initially scaled down to exactly 4 times screen DPI (so that 1 pixel corresponds to 4 units of the SVG user space).
Here's the example SVG. When it is opened, it must occupy the whole viewport, without scrollbars, but with a fixed scale of 1/4 (in relation to screen DPI).
The only way I can specify SVG scaling is by specifying viewBox.
The only way I can use the whole container is by specifying width="100%" height="100%".
But when both of these are specified, the SVG is automatically scaled based on container size.
Is there no solution to this simple requirement, without resorting to JavaScript?
Related
I am trying to display multiple SVG items in the same size, but each SVG item seems to have completely arbitrary size. Setting width/height to the top element did not work. Only transform=scale() worked, but since the argument of scale is ratio, that means that I have to specify different ratio to each item to make them the same size. So, instead of scaling them by ratio, is there any way to scale them to absolute size? Something like "scale to width 100px and height 100px", instead of "scale to 10% width and 10% height".
Mr Michael Mullany, I had tried that before posting this, but it did not work. Did I miss something?
NZ flag was very big and setting size made only the top/left show up:
Swiss flag was very small and setting the size did not enlarge it:
Not an expert on SVG, but:
No, I don't think that's how SVG works, because that kind of scaling operation would require to first draw the thing in some "native" size, then see how much that differs from the desired size, then calculate a correction factor for all coordinates (which is effectively scaling to some percentage of the original size), and redrawing it. And SVG supports effects which are scale-invariant but affect an object's bounding box, so this is mathematically impossible, as far as I can tell!
I might not be understanding the question - but is there a reason why you wouldn't use SVG's built-in image element, specifying width and height? (And no preservation of the aspect ratio - which is what I think you want?)
<svg width="1000px" height="1000px" viewBox="0 0 1000 1000">
<image x="0" y="0" width="100" height-"100" xlink:href="http://yourdomain.com/yourimage.svg" preserveAspectRatio="none"/>
</svg>
I am having some trouble drawing real-world objects on an SVG map.
context:
I have a map which I converted to an svg file (inkscape), this map is then displayed on a web-page with 100% width/height.
I then want to draw points on this map, those points have coordinates in mm (on a very different and bigger scale), so I need to apply a scale factor and a conversion to... pixels?
that's where the difficulty is for me, SVG file uses "user units" measure system, it is then drawn scaling everything to the frame where it is loaded, I would like to scale my real-world point coordinates system to a "user units"-like reference system so that such points can be dynamically drawn on the page.
the web page is html/svg + javascript and I am using svg.js library to draw everything on it.
any clue about how to make ma transformation to align everything up?
I have gone through canvas and SVG in html5. When it comes to the difference, It is mentioned that canvas is pixel based and SVG is vector based. I have not got what do they mean by these.
Thanks in advance
There is 2 way to register an image in your computer:
Register in pixel: It means that your image is register as a table of pixel. And in every box of your table a color is register. Such images, have a defined size (1 computer pixel for 1 table box). If you want to reduce the size, an algorithm will mix pixel to render a lower size image. And if you want to display bigger than it is you will see pixel or the image will become blurred.
Register in vector: This kind of image do not own a size. Indeed the file format register vector (direction and scale). And when you want to display it, you will specify a size and the computer will process your image to display it. If you zoom on the image (for example a line). You will never see pixels. Indeed every time you zoom, the image is reprocessed and a line stay a line.
I am new in godot engine and I am trying to make mobile game (portrait mode only). I would like to make background image fit screen size. How do I do that? Do i have to import images with specific sizes and implement them all for various screens? If I import image to big, it will just cut out parts that don't fit screen.
Also, while developing, which width and height values should I use for these purposes?
With Godot 3, I am able to set size and position of sprite / other UI elements using script. I am not using the stretch mode for display window.
Here is how you can easily make the sprite to match viewport size -
var viewportWidth = get_viewport().size.x
var viewportHeight = get_viewport().size.y
var scale = viewportWidth / $Sprite.texture.get_size().x
# Optional: Center the sprite, required only if the sprite's Offset>Centered checkbox is set
$Sprite.set_position(Vector2(viewportWidth/2, viewportHeight/2))
# Set same scale value horizontally/vertically to maintain aspect ratio
# If however you don't want to maintain aspect ratio, simply set different
# scale along x and y
$Sprite.set_scale(Vector2(scale, scale))
Also for targeting mobile devices I would suggest importing a PNG of size 1080x1920 (you said portrait).
Working with different screen sizes is always a bit complicated. Especially for mobile games due to the different screen sizes, resolutions and aspect ratios.
The easiest way I can think of, is scaling of the viewport. Keep in mind that your root node is always a viewport. In Godot you can stretch the viewport in the project settings (you have to enable the stretch mode option). You can find a nice little tutorial here.
However, viewport stretching might result in an image distortion or black bars at the edges.
Another elegant approach would be to create an image that is larger than you viewport and just define an area that has to be shown on every device no matter whats the resolution. Here is someone showing what I am meaning.
I can't really answer your second question about the optimal width and height but I would look for the most typical mobile phone resolutions and ratios and go with that settings. In the end you probably should start with using the width and height ratio of the phone you want to use for testing and debugging.
Hope that helps.
I'm looking for a way to create an responsive image using SVG, where some sections maintain their aspect ratio when re-sized and others are distorted. This pencil, for example, could be resized so the two ends stay the same shape and only the body is stretched, like the image below:
I can do this in HTML5 using CSS3's border-image-slice, e.g.
border-image-source: url("cropped-pencil_clipart.svg");
border-image-slice: 25% 50% 25% 25% fill;
See this codepen for an example. However I can't think of a way to achieve it in a 100% external SVG file that I can use as an image or object. In effect, I want the outer and middle elements to have preserveAspectRatio="none" and the left and right elements to have ="... slice". I know this isn't possible in "conventional" SVG 1.1 and I don't want to use JavaScript or ForeignObject because these would limit the ways I can use the external file.
Are there any clever workarounds that could selectively preserve the aspect ratio for individual parts of an image? I can re-create the source elements as pure paths if that's necessary. I've tried using patterns and even custom markers but without success so far. Any suggestions would be welcome.