starred/flag-icons

Fork 0

mirror of https://github.com/lipis/flag-icons.git synced 2026-04-26 17:35:54 +03:00

[GH-ISSUE #246] Flags as SVG images not displaying in Firefox #160

New issue

Closed

opened 2026-03-03 14:35:04 +03:00 by kerem · 5 comments

kerem commented

2026-03-03 14:35:04 +03:00

Owner

Originally created by @victorkristof on GitHub (May 24, 2016).
Original GitHub issue: https://github.com/lipis/flag-icons/issues/246

Hello,

I'm using the flags as SVG image:

<image xlink:href="flags/1x1/de.svg" height="30" width="30" x="0" y="0"></image>

It works well on Safari and Chrome, but they are not displayed on Firefox. The solution is to add a viewBox attribute to the root svg element of the flags (example with Germany 1x1):

<svg xmlns="http://www.w3.org/2000/svg" height="512" width="512" version="1" viewBox="0 0 512 512">
  <g fill-rule="evenodd" stroke-width="1pt">
    <path fill="#fc0" d="M0 341.338h512.005v170.67H0z"/>
    <path d="M0 0h512.005v170.67H0z"/>
    <path fill="red" d="M0 170.67h512.005v170.668H0z"/>
  </g>
</svg>

Would it be possible to add that for every flag ?

Thanks!

Originally created by @victorkristof on GitHub (May 24, 2016). Original GitHub issue: https://github.com/lipis/flag-icons/issues/246 Hello, I'm using the flags as SVG `image`: ``` html <image xlink:href="flags/1x1/de.svg" height="30" width="30" x="0" y="0"></image> ``` It works well on Safari and Chrome, but [they are not displayed on Firefox](http://stackoverflow.com/a/17718009/2086547). The solution is to add a `viewBox` attribute to the root `svg` element of the flags (example with Germany 1x1): ``` html <svg xmlns="http://www.w3.org/2000/svg" height="512" width="512" version="1" viewBox="0 0 512 512"> <g fill-rule="evenodd" stroke-width="1pt"> <path fill="#fc0" d="M0 341.338h512.005v170.67H0z"/> <path d="M0 0h512.005v170.67H0z"/> <path fill="red" d="M0 170.67h512.005v170.668H0z"/> </g> </svg> ``` Would it be possible to add that for every flag ? Thanks!

kerem closed this issue

2026-03-03 14:35:04 +03:00

kerem commented

2026-03-03 14:35:05 +03:00

Author

Owner

@lipis commented on GitHub (May 24, 2016):

Maybe using <img src="flags/1x1/de.svg"> instead of <image href="..."> will improve dramatically your chances of making it work..

@lipis commented on GitHub (May 24, 2016): Maybe using `<img src="flags/1x1/de.svg">` instead of `<image href="...">` will improve dramatically your chances of making it work.. <img width="889" alt="screen shot 2016-05-24 at 13 55 14" src="https://cloud.githubusercontent.com/assets/125676/15502935/308e7542-21b7-11e6-8160-6de4a876b091.png">

kerem commented

2026-03-03 14:35:05 +03:00

Author

Owner

@victorkristof commented on GitHub (May 24, 2016):

Except that I use them in an interactive D3.js Sankey diagram (i.e., within an svg element), where images are sourced with an <image> tag.

@victorkristof commented on GitHub (May 24, 2016): Except that I use them in an [interactive D3.js Sankey diagram](http://bl.ocks.org/wvengen/2a71af9df0a0655a470d) (i.e., within an `svg` element), where images are sourced with an [`<image>` tag](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image).

kerem commented

2026-03-03 14:35:05 +03:00

Author

Owner

@lipis commented on GitHub (May 24, 2016):

The SVG Image Element (<image>) allows a raster image to be included in an SVG document.

But this library here doesn't provide any raster images... so I'm not sure what you are trying to achieve..

@lipis commented on GitHub (May 24, 2016): > The SVG Image Element (`<image>`) allows a raster image to be included in an SVG document. But this library here doesn't provide any [raster images](https://en.wikipedia.org/wiki/Raster_graphics)... so I'm not sure what you are trying to achieve..

kerem commented

2026-03-03 14:35:05 +03:00

Author

Owner

@victorkristof commented on GitHub (May 24, 2016):

I'm doing something like this (interactive SVG):

However, in Firefox it it displayed like that:

Unless I add the viewBox, like I did for the german flag.

I was using these SVGs since I'm using them as CSS in other places. But you're right, maybe I should use raster images. Just thought it was easier like that :)

@victorkristof commented on GitHub (May 24, 2016): I'm doing something like this (interactive SVG): ![capture d ecran 2016-05-24 a 15 59 20](https://cloud.githubusercontent.com/assets/3234366/15506600/87a5c81a-21c8-11e6-8cc1-3983c2316187.png) However, in Firefox it it displayed like that: ![capture d ecran 2016-05-24 a 16 02 27](https://cloud.githubusercontent.com/assets/3234366/15506720/f39db60e-21c8-11e6-9f45-6d7600b504ac.png) Unless I add the `viewBox`, like I did for the german flag. I was using these SVGs since I'm using them as CSS in other places. But you're right, maybe I should use raster images. Just thought it was easier like that :)

kerem commented

2026-03-03 14:35:05 +03:00

Author

Owner

@cristianFainis commented on GitHub (Apr 2, 2018):

Hi guys, I had the same problem with IE. The solution I found is very easy. Just give a width and a height to the image.

function drawFloor() {
svg
.append("svg:image")
.attr("id", "image")
.attr("height", "386")
.attr("width", "1000")
.attr("xlink:href", "images/floor_1.png");
}

Easiest way to test it is to write the html code and delete width="1000" height="386". You`ll notice that IE will not render the image.

@cristianFainis commented on GitHub (Apr 2, 2018): Hi guys, I had the same problem with IE. The solution I found is very easy. Just give a width and a height to the image. function drawFloor() { svg .append("svg:image") .attr("id", "image") .attr("height", "386") .attr("width", "1000") .attr("xlink:href", "images/floor_1.png"); } Easiest way to test it is to write the html code and delete width="1000" height="386". You`ll notice that IE will not render the image.