Closed augbog closed 9 years ago
The SVG looks good to me. I dumped it into a test sprite and it built beautifully.
How does your options look?
Ahh I see strange... Sorry I should have included my options as well.
Here are my options:
"dr-svg-sprites" : {
test : {
options :{
spriteElementPath : "/Users/user/Desktop/assets/SVG/testing",
spritePath : "/Users/user/Desktop/assets/SVG/sprites",
cssPath : "/Users/user/Desktop/assets/SVG/sprites/_projects-sprites.scss",
layout : "packed",
cssPrefix : "projects-sprite"
}
}
I just tested some things and it seems that I can build the SVG sprite all by itself but when I try to add sprites to it, it will fail? Here is another SVG I added to the folder. Not sure if it has something to do with specific SVG files or maybe it is my options?
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 27 27" enable-background="new 0 0 27 27" xml:space="preserve">
<g>
<path fill="#999999" d="M13.5,0C20.9,0,27,6.1,27,13.5S20.9,27,13.5,27S0,20.9,0,13.5S6.1,0,13.5,0z M13.5,25.7
c6.7,0,12.2-5.5,12.2-12.2S20.2,1.3,13.5,1.3S1.3,6.8,1.3,13.5S6.8,25.7,13.5,25.7z"/>
</g>
<polygon fill="#999999" points="13.5,20.3 7.6,9.7 19.4,9.7 "/>
</svg>
And not sure if it helps but
Appreciate all the help!
I'm still not able to recreate the error :(
So I'm just grasping at straws here - but:
grunt-dr-svg-sprites
and dr-svg-sprites
are installed?Okay interesting I made a completely different folder with a fresh npm install of grunt-dr-svg-sprites
and it worked fine with just those two. I started adding all my other SVGs and set the layout to packed
and it returned the error again.
Then I tried setting it to horizontal
and vertical
and they both worked! The play-button I have is much larger than the other sprites so I'm not sure if that's causing the issue? Here is a picture of the final result. I set the background-color to black because some of my SVGs are white so it's easier to see the disparity in size.
And to answer your previous questions I'm running OSX 10.10.1 and I'm running "grunt-dr-svg-sprites
version ~0.9.15
. My files are named play-button.svg
and next-button.svg
.
EDIT: I just tried using it in my actual project and yeah it works fine if I set it to vertical
or horizontal
layout!
I don't think the bigger size would be an issue - besides if it's not the size you want ;)
You might be on to something about using the packed
layout; maybe it's a buggy behavior in the layout dependency. What version of layout
(a dependency to dr-svg-sprites
inside the node_modules folder) is installed? (Should be 2.0.0).
Oh hmmm that's possible. Just checked and it seems I am indeed on 2.0.0. From the package.json
"dependencies": {
"async": "^0.9.0",
"handlebars": "^2.0.0",
"layout": "2.0.0",
"lodash": "^2.4.1",
"mkdirp": "^0.5.0",
"svg2png": "^1.1.0",
"svgo": "^0.4.5",
"through2": "^0.6.1",
"vinyl-fs": "^0.3.0"
},
However, if you can't recreate the issue, I'm skeptical if this is actually a problem and maybe I just did something wrong? I'll investigate more and look into the layout
module to see if that's the culprit. Really appreciate all the help! I'll post back if I find anything. :)
Closing this for now until I can properly recreate the problem consistently.
For some strange reason I am getting this error
Cannot read property 'x' of null
when making a sprite for this SVG. However, all my other SVGs that were also made the same way work fine...Here's a jsFiddle. I changed the fill color in the jsFiddle just to make it clearer what it is but originally I wanted it
#FFFFFF
. It's just a play button made by my friend.Is anyone able to reproduce the error with this SVG code? I will try to look into the cause of it and report back if I find anything but until then if anyone has advice I would appreciate it.