I'm using an svg placed as an img, but it appears huge in my browser.
I added a height and width to the tag, but then it appears small. When I inspect it, I can see the box as the size I specified, but the logo is much smaller inside it.
How do you correctly specify a size for svg?
Here's the code <img src="<images/logo.svg" alt="logo"/>
I had it as <img width="558" height="58" src="<images/logo.svg" alt="logo"/> but the width and height came out smaller in the browser. Without them, it took up the whole area and was huge.
Related
i put iframe of Bandcamp embeded player on my website, but the background-image of my track look blurry.
i made this cover in Illustrator in 2400x2400 and i exported in Png24.. When i look the background image in Bandcamp the image seems in good quality.. i dont understand what to do to view the cover in my website in good quality.
you can see it in https://mauditemachine.com/
i tried to see what happened if i change the background-image to 1 instead of 8
<div id="art" class="item" style="background-image: url("https://f4.bcbits.com/img/a2126636077_8.jpg");"></div>
i see a better quality but i cant force it..
when i tried to change the size to 400x400 in the iframe code i have better results but i want to have 300x300 sizing.
i just change iframe parameters to select 100% for width and height.
In my Css i put width and height to 400px to a container above and for responsive design i put 300px
I already looked at the solutions under scale fit mobile web content using viewport meta tag but didn't have any luck with the samples provided.
My problem is that I have 940px wide web page which needs scaling up or down depending on the device viewport width. I'm using Phonegap to port web pages into an Android app.
If my viewport is over 940px, like on my 1200px wide phone, then the code below works fine. The viewport zooms just the right amount so that page fills the display:
var mvp = document.getElementById('view');
var ratio= screen.width / 940
mvp.setAttribute('content', 'width=device-width, initial-scale='+ ratio +', target-densitydpi=device-dpi')
However, if I have a low resolution tablet with a width lower than 940, the page is too big to fit, and needs moving around in order to see the off-screen parts. Based on discussion in the aforementioned thread, I tried the following, but no combination of viewport settings will force it to scale to 940, so that the view port can "zoom out" to the right size:
if (screen.width < 940) {mvp.setAttribute('content', 'initial-scale=1.0, maximum-scale=1, minimum-scale=1.0, user-scalable=yes, width=' + screen.width)};
or
if (screen.width < 940) {mvp.setAttribute('content', 'initial-scale=1.0, maximum-scale=1, minimum-scale=1.0, user-scalable=yes, width=' + 940)};
do not work. In fact, setting viewport width to any value manually just doesn't have any effect at all.
What I am I doing wrong? I just want the viewport width to zoom out so the whole width of the 940px page shows correctly. There must be a combination of viewport settings that will do this for me. I'd appreciate help.
The width value of the viewport meta tag sets only the layout width or "initial containing block" width. i.e. If you give the <html> element a style of width: 100%, the width it will end up in pixels is what you set in the viewport meta tag.
If your page is really 940 px (because, for example, you give your html an explicit width: style="width: 940px"), then width in the viewport tag wont have any effect (well, depends on which browser and other quirks - so setting it to 940 is a good idea).
So it's just a matter of making sure the page loads fully zoomed out. Browsers won't let you zoom out further than the content width of your page so you don't need a special case for larger screens. Chrome should load the page fully zoomed out. Firefox and Safari, as far as I can tell, usually load the page so that the width= attribute you set in the viewport tag fits in the device screen (hence my caveat above). So you really don't have to do much with the viewport meta tag:
<meta name="viewport" content="width=940">
Should do the trick, for both larger and smaller screens -- assuming your content is actually 940px wide. If that doesn't work, chances are your content has some size dependency on the viewport size or you have an extra wide element somewhere - a link or example to the content might be helpful.
I'm using several libraries to generate SVG images in-browser, which can be bounced off the server through svgexport to generate PNGs or JPEGs at user-specified resolutions. (This works as expected.)
I'd like to offer the user the option of downloading the SVG that gets fed into the conversion, with the resolution used to set the width and height attributes. When I do that, the viewbox is not scaled to the specified width and height, but is padded so that the image occupies the original size area in the upper left.
While looking for solutions, I found images in the W3C documentation that illustrate the problem. If you open these images in Chrome and use the inspector to change the width and height properties,
ViewBox.svg will expand to fill the width and height (linked from here)
PreserveAspectRatio.svg will be padded to stay in the upper left (linked from here)
This does not appear related the presence or value of thepreserveAspectRatio property, or the nesting of svg tags. My files are rendered as padded rather than scaled in Chrome/Chromium, Firefox, Safari/WebKit, Opera, Inkscape, and Gapplin.
How do I ensure that my SVG is scaled rather than padded to fill the width and height?
The viewbox is not scaled when it's entered as viewbox rather than viewBox; svg attribute names are case sensitive.
The second link does not have a viewBox attribute, and adding a viewbox (lowercase) attribute has no effect.
is there a way to make the background image of chrome theme resize with the height of the window? If so, can I also make the image resize with the height until it hist a certain ratio, and then resize with the width of the window?
It's not possible. Chromium source code doesn't have any stretching/sizing modes as you can see: theme_properties.h, theme_properties.cc and theme_service.cc
I've tried specifying an SVG image with width="100%" height="100%" for the background but it wasn't rendered, looks like only raster images can be used (WEBP, JPG, PNG, etc).
I tried use jpeg format, it resized itself, without anything added to manifest.json
Slowly losing my sanity... I've tried every search term I can think of, but can't find anything about what would seem to be exceedingly simple.
All I want is for the size, aka viewport, of my SVG to fit the containing elements.
I specifically don't want it to scale, crop, meet, slice, zoom or anything else. I just want it to behave like a default div.
The SVG will then be placed inside a div with a max-height and overflow:auto. When the SVG expands beyond the max-height of the containing div I will be able to scroll the div to see the whole of the SVG.