Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

test needed: svg supported as <img> src #107

Closed
paulirish opened this issue Aug 27, 2010 · 7 comments · Fixed by #913
Closed

test needed: svg supported as <img> src #107

paulirish opened this issue Aug 27, 2010 · 7 comments · Fixed by #913

Comments

@paulirish
Copy link
Member

firefox doesnt support this..

the basic test is:

  • create a svg document that is 1px by 1px
  • output it as datauri

then

  • construct an img
  • toss the datauri into its src
  • bind to onload and onerror
  • if onload fires, check if width == 1, otherwise fail

related:
http://twitter.com/the_nerdery/statuses/21510276986
also issue #13

@KuraFire
Copy link
Member

Recommended property to use for this:

Modernizr.svgasimg

@Kroc
Copy link

Kroc commented Sep 27, 2010

Should also test for svg as css background image.

@paulirish
Copy link
Member Author

kroc, i asked a few people and no one has any idea how to do write such a test. :)

you got any ideas?

@paulirish
Copy link
Member Author

@joakimriedel
Copy link

I implemented the following in a recent project, it works great but requires jQuery:

$('<img />')
    .load(function() { Modernizr.addTest('svgasimg', function() { return true; }); })
    .error(function() { Modernizr.addTest('svgasimg', function() { return false; }); })
    .attr('src', 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8%2BPHN2ZyB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgaGVpZ2h0PSIxIiB3aWR0aD0iMSIgdmVyc2lvbj0iMS4xIj48cmVjdCBoZWlnaHQ9IjEiIHdpZHRoPSIxIiB5PSIwIiB4PSIwIiBmaWxsPSIjMDAwIi8%2BPC9zdmc%2B');

@stopsatgreen
Copy link

The script I used in my post on Broken Links doesn't seem to work in Opera; I haven't had an opportunity to look into it yet, but you might want to confirm.

@edwardgalligan
Copy link

Unfortunately his test fails in Opera due to a known bug with onload for SVGs. DSK-276385 in their BTS, for reference.

Could possibly be temporarily worked around using canvas getImageData I think, though there might be x-domain restrictions there - Modernizr probably couldn't be remote.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

6 participants