asbjornenge / asbjornenge/imgurify

Firefox SVG support.

Open
#3 10 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
25
Forks
4
PR merge metrics
No merged PRs in 30d

Description

Firefox appears to have issues with the standard `svg+xml`, `non-encoded data` combination. I've found the following to work across Chrome and Firefox (IE works, but has other issues when attempting to render any SVG data to a canvas it seems.)

Based on the discussion here:
https://css-tricks.com/probably-dont-base64-svg/#comment-1586152

I've had better luck dropping the encoding altogether:

```
var svgHead = function(i,type) { return i == 0 ? "module.exports = 'data:image/svg+xml," : '' }
```

And leveraging `encodeURIComponent` instead of `esc`.

```
function svgStream(file, type) {
var i = -1
return through(
function (buf, enc, next) { i++; this.push(svgHead(i,type)); this.push(encodeURIComponent(buf.toString('utf-8'))); next() },
function (end) { this.push(svgTail()); end() }
)
}
```

Contributor guide

No contributing guide indexed for this repository

Research direction

Start by reading the svgHead and svgStream entry points shown in the issue, including the current use of esc and the SVG data-URI construction. Verify the behavior in Firefox and Chrome, then update the encoding approach so SVG data renders consistently and confirm the generated module output works.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.