Comments (10)
Oh, interesting. Thank you for bringing this up.
I can see the spaces being important since part of the srcset
algorithm involves whitespace separators.
My first inclination is to export a toSrcSet
option on the main object, but do you have an opinion on that?
from mini-svg-data-uri.
Yep, that’s exactly what I had in mind.
If you’d like this change to happen ASAP I’d recommend a PR, but if it’s not that urgent I’ll probably get to it this weekend.
(…is that default arg really called turdSize
?)
from mini-svg-data-uri.
Man, 4 years in JS and I still screw up this
. I’ll do what you did.
from mini-svg-data-uri.
Whoops, I completely goofed. I’ll publish a new version tonight.
from mini-svg-data-uri.
Should be up on npm as v1.1.3. Thank you for your patience and help!
from mini-svg-data-uri.
I like it, the intent is clear for handling the srcset
attribute instead of regular src
.
This is the current workaround(encodeSpaces
) for where it's being used with Gatsby:
const svgToMiniDataURI = require(`mini-svg-data-uri`)
const potrace = require(`potrace`)
const trace = promisify(potrace.trace)
const defaultArgs = {
color: `lightgray`,
optTolerance: 0.4,
turdSize: 100,
turnPolicy: potrace.Potrace.TURNPOLICY_MAJORITY,
}
const optionsSVG = _.defaults(args, defaultArgs)
// `srcset` attribute rejects URIs with literal spaces
const encodeSpaces = (str) => str.replace(/ /gi, `%20`)
return trace(tmpFilePath, optionsSVG)
.then(optimize)
.then(svgToMiniDataURI)
.then(encodeSpaces)
So we'd just use this instead?:
const svgToMiniDataURI = require(`mini-svg-data-uri`).toSrcSet
from mini-svg-data-uri.
We're in no rush. I'm flat out with other projects atm, so I won't have the time to contribute here sorry. This is a really great project though, I wasn't aware of what this library was doing until just recently!
(…is that default arg really called turdSize?)
-t, --turdsize n - suppress speckles of up to this size (default 2)
Leads to some fun issue names like determine optimal turd size for potrace.
from mini-svg-data-uri.
I did the simplest implementation that could possibly work in #11 — would you mind seeing if that branch works for your code, please?
from mini-svg-data-uri.
@tigt Hey sorry about the delay. Just got around to testing that out and it works great!
Well, I had to make a slight tweak as it seems the current code is causing problems with your this
reference:
The GraphQL query from /storage/projects/gatsby_test/using-gatsby-image/src/pages/traced-svg.js failed.
Errors:
this is not a function
GraphQL request (25:3)
24: fragment GatsbyImageSharpFixed_tracedSVG on ImageSharpFixed {
25: tracedSVG
^
26: width
,this is not a function
Where tracedSVG
contains a call to your toSrcset()
method. This is from just passing the function to a .then
chained to a promise. If you're unfamiliar with this
issues, here's some links:
https://stackoverflow.com/questions/37334284/javascript-promises-this
https://stackoverflow.com/a/20279485
https://stackoverflow.com/a/4700899
Which afaik in this situation would seem you should use a closure by moving the srcSet method into the main function body and setting it there as a property?(haven't really defined a function before where a function property is added to it that calls itself)
I ended up making this small change, swapping the this
for the main functions name instead, it appears to work properly now:
svgToTinyDataUri.toSrcset = function toSrcset(svgString) {
return svgToTinyDataUri(svgString).replace(/ /g, '%20');
}
from mini-svg-data-uri.
Hey @tigt , any chance of making that change and merging the PR? :)
from mini-svg-data-uri.
Related Issues (14)
- Could we get an online version hosted on GitHub pages? HOT 6
- Incorrect function name referenced in example? HOT 3
- Why single quotes? HOT 3
- Example code not working HOT 2
- Feature request: usable via command line HOT 4
- Should this work in a cursor as well? HOT 3
- Works in link only after pressing Enter HOT 4
- Broken image example HOT 1
- Going the other direction HOT 2
- CLI usage example in README.md incorrect (typo?) HOT 2
- Compact version HOT 5
- Shorter color names don't check the entire hexcode HOT 11
- Feature request: files -> SASS variables HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from mini-svg-data-uri.