I have an SVG sprite with several elements. I am using them as CSS backgrounds. I would like to use the elements in different sizes without using JS. Please help me.
You could add an SVG fragment identifier to the URL with a viewBox e.g. MyDrawing.svg#svgView(viewBox(0,200,1000,1000))
This works in Firefox, support in other UAs may vary.
Related
I made a logo from SVG, and it looks and works fine. The only problem is that when I go into dev tools and then use the select an element tool, it also shows the elements inside of the SVG image as separate elements, rather than the SVG being A single element. I am using an embed tag so the custom font loads. Is there a way to make the SVG show as one image rather than many elements? Thank you!
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'm trying to use SVG symbols as described in this CSS tricks article, but get a gap on the left and right around the SVG and it's width is 300px wide.
I want the SVG to fill the full width of the container. Adding width: 100% to the SVG doesn't help.
I've made a codepen to explain what is happening. The first example shows the problem.
Adding a viewBox attribute corrects the issue in the second example, but that's not ideal because I'm generating the SVG symbol from a folder of SVGs using webpack. So the viewBox information will have to be copy/pasted every time I reference an SVG in the HTML. This isn't ideal when you consider other people might want to edit the SVGs at a later date and might not realise they have to manually update the viewBox info in the HTML, which would result in broken looking icons.
This would become as unwieldy as having to explicitly add the dimensions of an image to all <img> tags. Not a great situation!
Is there any other way to fix it without adding a viewBox attribute?!
So here is the problem:
I am trying to create dynamic buttons that have text. The text will be generated dynamically so the svg object doesn't know the size of the text. There are two things that I am looking to do and I hope that SVG will do this
First I want the left and right edge of the svg element to stay the same even if I scale the element horizontally
The problem is that I have to set a width on the svg otherwise it doesn't show up when I display the page. Also on the Home and blog buttons you can see that the edge is compressed. I want the edge to stay the same no matter how much text is in the element.
Also I can't seem to set the scale or width properly even with a javascript .getComputedTextLength()
Any help or a point in the right direction would be very helpful
Buttons that are sized to their text content is functionality that can be adressed with Raphael's getBBox()
The use of this js library means that you are implicitly using SVG or VML and this functionality is more easily addressed by referencing this JavaScript library
To see the getBBox() function in action you could visit the Autobox example here:
http://www.irunmywebsite.com/raphael/additionalhelp.php?v=2
I tried to resize svg file to be opened in illustrator with smaller width and height(pixels or cm), I did this by changing width, height and viewBox attributes in <svg> tag, but it doesn't work at all. By search I have found that transform attribute via matrix value affects the real resizing of the figure, any ideas about ready made functions or scripts using python or librsvg to successfully scaling the svg figure, by the way I'm using inkscape to produce svg files. THANKS
You could try svg scour, that should be able to find a good viewBox to use (note spellning and uppercase 'B'). Then change only the width and height attributes to be whatever you want, and hopefully that should work.