I've got a strange behaviour when using SVG as textures in three.js.
When loading the first texture all is fine but the second one contains the first one when used as a texture (they share the same viewBox in the SVG but that shouldn't be an issue normally). Stuff is working when using PNGs or other image files.
Here is a minimal example:
http://jsbin.com/xeyigahata/1/edit?html,js,output
Thx!
Related
How can I place a complex SVG image (with css-styles!) geo-referenced over an openlayers map so that the document's CSS styles are used with rendering the SVG.
A regular ImageLayer does a fine job of showing the georeferenced svg on the map as an image. But because it is an image, the CSS of the document has no effect on the rendered SVG
The SVG Layer example on the other hand places the SVG into the DOM and makes it react to the document's CSS and reacts when you change the CSS. But it always maps the SVG over the whole planet and seems to hide any layer I place under it.
To give you an idea of the use case: we have an externally generated SVG with several 'groups or layers' in it representing different aspects of infrastructure. This svg has to be put correctly over a map (like we can do with the imagelayer), but we want to be able to selectively show/hide the different 'groups or layers' that are within the SVG.
I guess in the end we would be needing something similar to ol/layer/Image/ImageLayer to happen in the SVG-layer example.
Any suggestions about how to approach this would be very welcome, but working code is also OK ;-)
In the example the image width is 360 degrees and the center is at [0, 0]. For a smaller extent you would need to use the appropriate width and adjust the center used in the transform https://codesandbox.io/s/lucid-poitras-i1qyb?file=/main.js Use an opacity setting to avoid completely hiding the base layer.
I have an Easel.js-based canvas and a bunch of SVGs. When I put these SVGs on canvas as vector shapes and try to scale the whole canvas, some SVG contours become distorted / blurred.
Are there any ways to avoid such a behavior?
Problem:
SVG sample:
http://s000.tinyupload.com/index.php?file_id=88515840051764837348
EaselJS support in canvas is restricted to image-based rendering. Basically, it loads the SVG as a raster image. When you scale it, you aren't seeing it redraw the vector, but instead it scales like an image would. If you scale it above 100% it should be more obvious (it will get pixelly/blurry).
Not sure if you can work around this with an SVG source. You could bring paths into Adobe Animate, and export as raw EaselJS Graphics, which will scale more predictably.
Cheers,
Here is an SVG image I want to convert to PNG with librsvg in my program.
This is a PNG version of the SVG exported from Inkscape:
This is a bitmap of the same SVG exported with librsvg:
Only the white portions of the image are exported. The black portions, despite being well-defined in the background, appear transparent.
This problem occurs whether I use the librsvg API or the program rsvg-convert. You can use the W3 validator to see that the SVG's markup is valid.
I notice the same thing happens in the thumbnails of the SVGs in my file browser. Perhaps they're using librsvg?
Upon digging into the files I discovered that, for some reason, the fill of the black portion was set to "fill:currentColor". I don't know where that came from, but changing it to "fill:#000000" fixed the problem.
ive used an online srpite service http://spritegen.website-performance.org/ but i want to know how to make them by myself.
How can i save an image that it should be so small but when used on my web site it comes out normal size?
Sprites aren't about making the image itself small, it's about decreasing filesize by packing several images into one.
Take a look at Yahoo's icon sprite. Notice that they have all their section icons stacked vertically in one large image. They then use CSS to position the background to only show a small window of the sprite image, thus giving you just the icon.
In the end, it's up to you how you arrange your sprite. Check out the bottom of Amazon's sprite.
Either way, hopefully that helps gives you a better idea of the concept of sprites.
From the very site you link:
CSS sprites are a way to reduce the
number of HTTP requests made for image
resources referenced by your site.
Images are combined into one larger
image at defined X and Y coorindates.
Having assigned this generated image
to relevant page elements the
background-position CSS property can
then be used to shift the visible area
to the required component image.
So there is nothing magical involved: you simply need to pack all your pictures into a single giant image with your favourite graphics tool and insert them as CSS background. Just look at this CSS sprite by Google:
I have a path I've created in Illustrator and saved as an SVG.
Now I want to programmatically place it at different sizes and coordinates on a large canvas.
Say I've got this image:
(source: omgtldr.com)
How would I reproduce that same image in different places and sizes in one SVG file, like this:
(source: omgtldr.com)
for example, one version shrunk by 20% at coordinates x,y; another enlarged by 30% at coordinates a,b and so on.
Please assume I'm going to be OK with the programming part, I'm comfortable working with XML files. It's the SVG parts I don't understand.
You need the transform attribute. You can move your paths with translate and resize them with scale.
Better to use the <use> element (transformed) than to copy your path for each instance.