jonnyhaynes / inline-svg Goto Github PK

View Code? Open in Web Editor NEW

57.0 57.0 20.0 69 KB

Takes an inline image with an SVG as it's source and swaps it for an inline SVG

License: MIT License

JavaScript 100.00%

inline-svg's People

Contributors

Stargazers

Watchers

inline-svg's Issues

Wrong handling of `longdesc`

Your code copies the content of the longdesc attribute into the desc element.

However, the longdesc attribute shall contain "A link to a more detailed description of the image. Possible values are a URL or an element id" (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attributes:~:text=CSS%20property%20instead.-,longdesc,-Deprecated), while "The desc element provides an accessible, long-text description of any SVG" (https://developer.mozilla.org/en-US/docs/Web/SVG/Element/desc).

Completely different kind of content. The longdesc attribute is a link, not a text.

Uncaught ReferenceError: callback is not defined

If I use your plugin like this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="/node_modules/inline-svg/dist/inlineSVG.min.js"></script>
  <script>
    inlineSVG.init({
      svgSelector: 'img.svg', // the class attached to all images that should be inlined
      initClass: 'js-inlinesvg', // class added to <html>
      storeResults: false // should the results be stored in localStorage
    }, callback);
  </script>

I receive:

Uncaught ReferenceError: callback is not defined

Why? If I remove the callback it works. Is this really needed?

Script not working asynchronously – should be asynchronous to avoid performance issues.

We're not currently creating asynchronous requests which could cause issues on some projects.

SVG style issue

If we are convert two svg images having same classes. One having embedded style tag then other svg also using the same styles that are used in first svg image.

Aria labelledby not pointing to correct value

aria-labelledby should point to an ID, but instead it is pointing to the title tag. This leads to a broken aria reference.

Additionally, aria-labelledby shouldn't be added if no alt attribute is present. Can consider adding role="presentation" and aria-hidden="true" in cases where no alt is present. As this tells screen readers to ignore it, similar to when an empty alt is present on img tags

Could you please tag version 2.2.3?

The README suggests specifying this version in bower.json, and, though it's been updated in your bower.json, the repository hasn't been tagged. bower install outputs:

bower inline-svg#2.2.3 ENORESTARGET No tag found that was able to satisfy 2.2.3

Additional error details:
Available versions in https://github.com/jonnyhaynes/inline-svg.git: 2.2.1, 2.2.0, 2.1.5, 2.1.4, 2.1.3, 2.1.2, 2.1.1, 2.1.0, 2.0.1, 2.0.0, 1.2.0, 1.0.5, 1.0.4, 1.0.3, 1.0.2, 1.0.1, 1.0.0

<svg> className is removed

If the <svg> tag in the image being loaded has a class, this will be overridden when the SVG is inlined:

SVG file

<svg class="someclass" xmlns="http://www.w3.org/2000/svg" width="53" height="27" viewBox="0 0 53 27">
    <circle cx="26.5" cy="13.5" r="8" fill="#FFF" fill-rule="evenodd" />
</svg>

Expected outcome

<svg class="someclass svg inlined-svg" xmlns="http://www.w3.org/2000/svg" width="53" height="27" viewBox="0 0 53 27">
    <circle cx="26.5" cy="13.5" r="8" fill="#FFF" fill-rule="evenodd" />
</svg>

Actual outcome

<svg class="svg inlined-svg" xmlns="http://www.w3.org/2000/svg" width="53" height="27" viewBox="0 0 53 27">
    <circle cx="26.5" cy="13.5" r="8" fill="#FFF" fill-rule="evenodd" />
</svg>

I know as a workaround I can define the class in the <img> tag and it'll be retained, but this seems redundant/inconvenient.

Support for SVGs stored on AWS

Hello!
I am trying to find a solution to allow inline insertion of SVG graphics which are stored on a AWS S3 process. I am able to get inline-svg working but if my img tag refers to the AWS URL then the SVG is not inserted inline, its left as an image tag (the svg is visible, just not inline). Is there any way to get inline-svg.js to work with files stored on AWS?

Convert the script to an AMD/Common.js compatible module

We should probably look to make this an AMD compatible module.

Cannot find module 'inline-svg' when using browserify

This is due to the main field pointing to inlineSVG.js in the root of the project.

Cannot read property 'removeAttribute' of undefined

I'm having some errors while using this library. It seems to be working anyways so far.

Cannot read property 'removeAttribute' of undefined
Line 121

inlinedSVG = result.getElementsByTagName('svg')[0];

// Remove some of the attributes that aren't needed
inlinedSVG.removeAttribute('xmlns:a');

There should be a check if( inlinedSVG ) actually exists.

Accessibility

The older jQuery code had the ability to add in an aria-label and title attribute to the resulting SVG, the new non-jQuery version doesn't currently add in the title attribute as per the W3C spec.

Callback Doesn't Ever Fire

It appears as if the callback never actually fires, utilizing the following syntax:

inlineSVG.init({
      svgSelector: INLINE_SVG_OPTIONS.selector,
      initClass: INLINE_SVG_OPTIONS.initClass,
    }, () => {
      console.log('ever getting here?');
});

Thoughts on this?

jonnyhaynes / inline-svg Goto Github PK

inline-svg's People

Contributors

Stargazers

Watchers

Forkers

inline-svg's Issues

SVG file

Expected outcome

Actual outcome

Recommend Projects

Recommend Topics

Recommend Org

Jobs