I'm currently working with a Swiss map in SVG format. The <svg> tag is directly embedded inside a <div>.
In Chromium (Linux), everything just looks fine, but in Firefox (Linux) only a part of the SVG is shown. The SVG markup itself seems to be valid.
Chromium:
Firefox:
I created a jsfiddle with the source code for easier testing: http://jsfiddle.net/MKRXN/
Is this a Firefox issue, or is it some problem with the SVG? In any case, how can I get this to work correctly?
You should set height and width to your parent div and then set the svg both height and width to 100%:
HTML:
<div id="map" style="height: 500px;width:600px;">
SVG:
<svg
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.0"
id="svg_main" style="height: 100%;width: 100%">
Check this code: http://jsfiddle.net/Kgs6J/
Related
I have a piece of code
<img src="xxx" style="zoom:80%" />
It is displayed as expected on chrome.
But on Firefox, this picture is not zoomed.
What should I do?
CSS zoom is non standard, and is not supported by Firefox. See MDN
You could try transform:
<img src="xxx" style="transform: scale(80%);" />
I have a table cell that includes an image that should be 50% of the cell's width.
The code works in Chrome, Firefox, and Edge, but in IE11 instead of taking on 50% of the cell's width, large images just take on 50% of their native size.
Here is a fiddle using a 800px wide image. Works fine except in IE11, where the image displays as 400px wide instead of responsive:
https://jsfiddle.net/43Tesseracts/9knqerj7/4/
Here is the relevant html with bootstrap:
<td>
<img src="http://hdwallpaperbackgrounds.net/wp-content/uploads/2016/12/Images-2.jpg"
style="max-width:50%;"
>
The image beside me should appear 50% of the cell, not 50% of it's native size. WOorks in Chrome, FF, Edge, but NOT IE 11
</td>
There appear to be many similar issues on SE, but they are all much older, or use an older version of Bootstrap. I'm using Bootstrap 3.3.7
there is no need for extra div's. you can set the following css property on the table element:
table{
table-layout: fixed;
}
i updated your fiddle with a working example:
https://jsfiddle.net/9knqerj7/10/
(in addition, i changed the img to be a block element and float left, but that is not required for the responsiveness - just looks better IMHO)
You could solve this issue using divs like i did here:
<td>
<div style="display: flex;">
<div style="width: 50%">
<img src="http://hdwallpaperbackgrounds.net/wp-content/uploads/2016/12/Images-2.jpg" style="width: 100%">
</div>
<div style="width: 50%">
THe image beside me should appear 50% of the cell, not 50% of it's native size. WOorks in Chrome, FF, Edge, but NOT IE 11
</div>
</div>
</td>
Working solution: https://jsfiddle.net/9knqerj7/8/
first of all here is the link to jsfiddle: http://jsfiddle.net/HotFrost/RnNX3/6/
you can see that in chrome the graph layout inside the svg element, panned and zoomed ok. Whereas for IE (v9.0) it totally disregards the borders.
basically for this simple layout:
<div id="wrapper">
<div id="content-col"> graph
<div id="graphwidget_graphContainer" style="border: 4px solid purple;" ></div>
</div>
<div id="right-col"> menu </div>
</div>
IE and Chrome render graph differently.
I have tried to use different settings for width/height/remove them. I have tried to replace the divs with table cells.. Still same problem - in IE graph nodes are rendered above the svg element and then (when panned/zoomed) also go over the svg element borders.
Anyone can give some ideas how to fix it?
Thanks in advance!
HF
We display SVG images in MediaWiki using a template with this code:
{{#tag:svgfile||src={{{1}}}|height={{{height|300px}}}|width={{{width|600px}}}}}
where {{{1}}} is the uploaded file.
Now we want to be able to rescale the image, just like we do with JPGs, etc, using:
[[Image:<file name>.JPG|200px]]
Does anyone know how to do that?
Our current workaround is simply to recreate the SVG (in Visio) at a different size which is quite time consuming!
Update: code on page is:
<p><b>{{SVG|Bitmap VS SVG.svg|height=300px|width=400px}}</b></p>
<p>
<a class="external autonumber" href="<url>index.php?title=Special:Upload&wpDestFile=Bitmap VS SVG.svg">
<iframe src="/mediawiki/images/6/6b/Bitmap_VS_SVG.svg" width="400px" height="300px" frameborder="0"></iframe>
</a>
desc
</p>
OK, there are two parts to this solution and I can only help you with the first part, but here it is:
Browsers (Firefox, Chrome & Opera) will resize the image to fit the available space if you remove the explicit size from the SVG file and replace it with a viewBox. Here's what that Bitmap_VS_SVG.svg file on Wikipedia has at the top of it:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink" width="1063" height="638">
And here's what it needs to be for automatic scaling:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1063 638">
You can see the difference in the context of the iframe as generated by your template above in this example page.
Now the second part of this is how you can get it all to work on MediaWiki, and for that I can be less help. I signed up for a Wikipedia account to try some stuff out but the default file embedding just creates a PNG version of the image, and it didn't seem like your particular template was available. So to get this working for you, you're now going to need the help of someone who understands MediaWiki templates.
6 years after the question has been answered, it works as expected :
[[Image:fooobar.svg|200x200px]]
I want to know how can one actually use a .svg file In a web page?
See svgweb quickstart and the svgweb project homepage for something that works in all browsers including IE (requires flash plugin).
There are many ways to include an existing svg file:
<img src="your.svg"/>
<object data="your.svg"/>
<iframe src="your.svg"/>
<embed src="your.svg"/>
<div style="background:url(your.svg)">...</div>
If all you want to do is to place an SVG image such as a logo or static diagram, you just need to be careful to provide a fallback for older versions of Internet Explorer (i.e. versions 8 and earlier).
The best and simplest method I've found is to use a .png or .jpg for your fallback, placed using a normal img tag. You then wrap the img tag in an object tag, using the data attribute to place the SVG.
<object data="/path-to/your-svg-image.svg" type="image/svg+xml">
<img src="/path-to/your-fallback-image.png" />
</object>
The img fallback is only loaded and used if the browser doesn't understand SVG.
I recommend putting the svg inline into your document (html5 technique). Just open your SVG file, copy the SVG tag and everything insideof it and then paste it into your html document.
<html>
<body>
<svg></svg>
</body>
</html>
It has the advantage that this allows you to use css to style it, like changing the fill color or applying filters to it like blur. Another advantage is that you save one http request for fetching the svg file if it is inside of your document.
If you want for example to change its position using css, then you have to put the css inside of a style attribute. Styles that are in an external css file will not get applied in most browser as this is a security restriction. For example:
<svg id="mySVG" style="position: absolute; top: 200px; left: 200px;"></svg>
This technique is supported by all browsers except IE8 and below as well as the android 2.3 browser and below.
Read the chapter inline SVG for further details:
css-tricks.com Using SVG
developer.mozilla.org SVG In HTML Introduction
If you dont want to put it inline in your page then the best alternative seems to be the object tag and avoid using the embed tag.
Read this for further details about object vs embed vs img tag:
How to Add Scalable Vector Graphics to Your Web Page
http://www.w3schools.com/svg/svg_inhtml.asp
The best example:
<embed src="rect.svg" width="300" height="100"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />
Caspar's approach is the proper one. However, I would move the fallback to the CSS, since you probably want to apply some styles to the svg file itself...
<object data="/path-to/your-svg-image.svg" type="image/svg+xml" class="logo"> </object>
CSS
.no-svg .logo {
width: 99px;
height: 99px;
background-image: url(/path-to/your-png-image.png);
}`
Raphaël—JavaScript Library. Nice javascript library that is using svg, and gives you a large range of effects!
Also supports most browsers, including IE
I'd like to agree with the answer from "code-zoop". Although this technically doesn't answer your question, it might also be a solution: enter the relevant data straight into the HTML. Either directly as an svg element, or by using Raphaël-JS.
From w3c-schools:
SVG is all suported in In Firefox, Internet Explorer 9, Google Chrome,
Opera, and Safari you can
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>
</body>
</html>
(end of quote)
And to think even more outside the box, depending on how you want to use it, you can also put your 1-color graphics in a webfont. (see for example iconmoon.io )