dirkgroenen / svgmagic Goto Github PK

View Code? Open in Web Editor NEW

595.0 595.0 69.0 267 KB

Fallback for SVG images by automatically creating PNG versions on-the-fly

Home Page: https://dirkgroenen.github.io/SVGMagic/

License: Apache License 2.0

PHP 24.25% JavaScript 75.75%

svgmagic's People

Contributors

Stargazers

Watchers

svgmagic's Issues

Does it work with SVG sprites by using xlink:href="#spritename"?

SVG's sprites are multiple SVG's combined into one file by using a block or definitions. Does SVGMagic support linking to those symbols using xlink:href="#spritename"?

Direct Download link broken

The Direct Download link is broken on the main page.

IE8 compatibility

Hi, thx for the great plugin, unfortunately the new version (2.3.1) seems not to work in IE8 anymore. Version 2.1.4 worked fine. Exept after a long page-load-time, the script breaked. Any idea?

As SVGMagic is presented as a quick, "magic" solution, I think you have a duty to explain and educate users on the real performance impact without brushing it off so nonchalantly! Every developer would benefit from understanding technically how browsers parse the page, when JavaScript is executed, how DNS lookups work etc. Unfortunately too many front-end devs see jQuery plugins as magic.

How does SVGMagic create the PNG?

You may want to mention this in the readme.

getReplacementUris vs getReplacementUrisFromRemoteService

@craigfowler I've finally merged your fork of SVGmagic to this main repo, but after merging I stumbled on some problems/questions.

The script checks if images need to be replaced, and if so it calls the getReplacementUris function. However, this function doesn't replace the images. I've edited the function call to the getReplacementUrisFromRemoteService function which, after some little modifications, does replace the images.

May I ask why you've added this function to the script and what it should do?

Please include version of jQuery required in the documentation

Some websites already on production might use older jQuery versions.

You should mention the minimum version of jQuery required.

Thanks

svgmagic.bitlabs.nl replace lang param in html tag

Hello guys,

your plugin is awesome. This ticket is for your website. The content is en english, but in your <html> you have this param lang="nl-NL". I know is a really small thing, but it's importat. For example the facebook like plugin is in Dutch. I think the lang also affect in some point the SEO?

Another suggestion: use the gh-pages branch to deploy the website is possible, or you are using technologies that GitHub doesn't support?

---

does it work with data URIs?

Will SVGMagic work with data URIs?

Also, will it work if the data URI is not base64 encoded?

Changing the license to Apache

After some digging in into the licenses I want to change the current SVGMagic license from GPL to Apache. As a formality I have to ask this to the contributers ( @craigfowler ). Do you agree with changing the license to Apache?

How can I get it to work locally on my dev machine?

I would like to test this out, but I can't, because if I try locally, the connection to svgmagic.bitlabs.nl timesout after a minute.

Notify users when not in online environment

Add a check to notify the user when he is not in an online environment.

Mainly useful for <IE9?

First of: kudos :)

However: is this not mainly/only useful for IE lower than IE9 since these (and Android 2.3 according to http://caniuse.com/svg) are the only browsers not supporting this basic SVG usage?

Whatever your stance on supporting these old browsers I think it might be good mentioning that this script will mainly be useful for these browsers. Why not load and initialise the script in IE Conditional Comments (unless Android <=2.3 is of major concern)?

For all other browsers it seems an extra script/performance cost.

Demo not working?

Hi there,
First of all, great plugin! Exactly what I was looking for!

If I stand correctly, if you set the forceReplacements: true option, it will replace the svg image for an png no matter what browser you're viewing the content in right?
Well if I view the demo in Firefox for example, I only see two svg images? Am I missing something?
https://dirkgroenen.github.io/SVGMagic/demo.html

Another question, will it matter if my img is inside a picture element like this:

<picture>
    <!--[if IE 9]><video style="display: none;"><![endif]-->
    <source srcset="image.svg">
    <!--[if IE 9]></video><![endif]-->
    <img srcset="image.svg" alt="alt text" />
</picture>

p.s. In Chrome it does swap the left svg image

Watch SRC replacements

Maybe an idea to add a method that will watch images for src replacement and create a SVG on-the-run when replaced.

Or a function that can be called to re-run svgmagic.

jQuery plugin should support chaining by returning 'this'.

Generally jQuery plugins which do not return another value should return 'this'. This makes things like the following possible:

$('img.svg')
  .svgmagic()
  .addClass('svg_replaced');

See http://learn.jquery.com/plugins/basic-plugin-creation/#chaining

Background image on links

Just wanted to say this is an amazing plugin.. really great work!!

I have noticed if you are trying to replace SVG background image on links the replacement images don't show, I have tested in IE8 on W7 and XP. I only had a few links with bg images anyway so just replaced them via CSS.. great plugin again!!

Inline SVGs?

First of all, great work, really useful plugin!

Would be nice though if it would also work with inline svg graphics =)! Any thoughts about implementing this?

Can I force this to run?

I don't like the way any version of IE supports SVG's. Is there a way I can force the script to run and place png's for any version of IE, or any browser for that matter?

Not working on IE8 and IE7

SVGMagic is just not doing anything in IE8 (tested in Developer Console and on a Windows XP System). I do use 2.4.5

working with svg sprites and "use"

any way to get svgmagic to work with an svg sprite and svg use tags?

eg:

<svg viewBox="0 0 100 100" class="icon shape-codepen">
  <use xlink:href="/images/svg-defs.svg#shape-codepen"></use>
</svg>

see https://css-tricks.com/svg-sprites-use-better-icon-fonts/ for more details.

thanks!

Direct Download link broken.

https://raw.githubusercontent.com/dirkgroenen/SVGMagic/master/src/jquery.svgmagic.js

include svg magic into wordpress plugin

hi dirk, how can i implement svgmagic into a wordpress plugin?

i tried:

##################################################################
 enable svgmagic fallback (auto png creation)
##################################################################

function fallback_svg(){
wp_register_script( 'jquery.svgmagic', WP_PLUGIN_URL.'/svg-images/svgmagic.js', array( 'jquery' ), "2.3.1", 1 );
wp_enqueue_script( 'jquery.svgmagic' ); 
}
add_action( 'wp_enqueue_scripts', 'fallback_svg' );

but it won't work - maybe it's because it was with an older version.
i am not so good in writing plugins, so any help is highly appreciated. also i have not a very good testing area (older browsers etc.)
it would be cool to implement svgmagic with the converter.php

best regards
telemarker

Stopped working in IE8

Hi there,

The current version 3.0.0 just stopped working for me...
Are you by any chance having problems on your server? The demo doesn't work either anymore in IE8.
I only have the following line in my script:

$('img').svgmagic({forceReplacements: true }); // true for debugging

Thanks, Toine

dirkgroenen / svgmagic Goto Github PK

svgmagic's People

Contributors

Stargazers

Watchers

Forkers

svgmagic's Issues

Recommend Projects

Recommend Topics

Recommend Org