How can I replace an SVG shape with an image? - javascript

Given an SVG like the one from this Google Visualization Example, there are circles drawn on the svg like this:
<circle cx="448.0843694002127" cy="236.6677163333033" r="12" stroke="#cccccc" stroke-width="1" fill="#0000ff"/>
I tried using firebug to manually replace that with a sample image at the same x/y coordinates, so for instance replacing the above code with:
<img width="50px" height="50px" cy="135.71439117815066" cx="343.43783232923863" xlink:href="http://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/Flag_of_Fukuyama%2C_Hiroshima.png/320px-Flag_of_Fukuyama%2C_Hiroshima.png">
But that doesn't work (nothing seems to render properly). I thought perhaps using cx/cy was the issue, so I tried switching those to just regular x/y properties:
<img width="50px" height="50px" xlink:href="http://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/Flag_of_Fukuyama%2C_Hiroshima.png/320px-Flag_of_Fukuyama%2C_Hiroshima.png" x="343.43783232923863" y="135.71439117815066">
Again, no-go.
I tried the technique used here:
Does SVG support embedding of bitmap images?
But again, it didn't render the image in the SVG.
I checked all over Stack Overflow, but found information only on how to tile a circle with an image:
Add a background image (.png) to a SVG circle shape
This has its own set of images as the pattern just tiles and can't be resized for each shape.
Is there any reliable way of doing this? Ideally, I want to loop through each circle and replace it with an image that will be sized to the circle it replaces.
I downloaded the SVG and added the image manually, but I get the following error:
XML Parsing Error: prefix not bound to a namespace
Location: (removed
for privacy)
Line Number 2, Column 1:<image width="50px"
height="50px" y="135.71439117815066" x="343.43783232923863"
xlink:href="http://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/Flag_of_Fukuyama%2C_Hiroshima.png/320px-Flag_of_Fukuyama%2C_Hiroshima.png">
^

The element you want is <image> not <img>.
And the attributes cx and cy are meaningless on <image> elements. You can use x and y instead (like in your second attempt), and note that you are required to specify a non-zero width and height on the <image> element (again like in your second attempt). See the svg spec for the details.

Just create a mask using an image. The draw the circle or any other graphics referencing the mask.

Related

How do I set presentation attributes of Image tags that can be found within SVGs (Files or Inline)? [duplicate]

This question already has answers here:
How can I change the color of an 'svg' element?
(40 answers)
How to change color of SVG image using CSS (jQuery SVG image replacement)?
(18 answers)
Closed last year.
This post was edited and submitted for review last year and failed to reopen the post:
Original close reason(s) were not resolved
I am writing an SVG editor program. I am trying to implement highlighted feel for when an element (<image>, not <img>) is clicked. I have implemented this for other elements like <circle>, by setting stroke, stroke-width, and stroke-dash-array. But setting the presentation attributes of the <image> tag, either by setting the attributes directly or through CSS styling, is not taking effect. I also tried the border style but it's not working. How can I achieve this?
According to MDN , <image> is meant to have have global attributes, including presentation, which ultimately means this should work. If you also inspect <image> with a browser you will see it will highlight like it follows box model.
<svg viewBox="0 0 1370 1170" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<image width="128" height="128" x="617.9207153320312" href="data:some-valid-link" style="stroke-width: 3px; stroke-dasharray: 7px;" stroke="#3aa2c2"></image>
</svg>
I don't think that you can set stroke on an image.
Usually those attributes are used to 'draw' vector image. Here you're trying to put a stroke on a raster image.
If you want to put lines around a square image you could use a border to achieve it.
If you want to put lines around a complicated shape, I don't think it's possible to do that in CSS. You would need to add that in graphics software.
You cannot restyle an external SVG, if you load it in an <img> tag.
Instead, you could paste the <svg> code directly into your HTML, and apply styles like this (source svg):
svg {
width: 500px;
}
svg path,
svg polygon {
stroke-width: 10px;
stroke-dasharray: 10px;
}
<svg height="210" width="500">
<polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;"/>
Sorry, your browser does not support inline SVG.
</svg>
You would need and SVG with a more specific code targeting all the vectors and not just a tag. Then you could make groups of the parts of the image/draw you want to style. You can do this by using illustrator, then after grouping the parts, your code will have a 'g' tag: <g id="group_to_style" > with an ID that you have named when doing the groups. Then using CSS you can target the groups of the SVG and style or even animate. Like gru said, with an you cant style or animate anything.

Replacing SVG element (path) keeping same size/coordinates

I need to replace part of SVG image (map of hall seats) and it doesn't work as I would expect.
I have <g transform="translate(383.25,-48.882672)"><g .. node containing few rect and path elements which build an icon. I can find g by class with jQuery and .html(other_path_content) which makes content appear in the original size (too big to fit the original item spot). When I resize new icon <path d=.. manually and html it again, it goes off the place and appears in different location than original icon.
The problem here is that SVG images I get are random so I can't calculate place of the original icon and transform it to be there as it will be different everytime.
Is that possible to somehow calculate position of the original element and its size (mind it contains of few rects and pathes) and put new one on exact same place? Or maybe I'm missing something in my approach (do I need to re-init svg after appending new node etc.)?

add custom svg layer on google map (api v3)

Here is the problem,
I try to add a custom layer (svg) on a google map.
The layer I chose is really simple, it is just a "rect" but sooner or later these are gonna be much more complex with paths & so on... but that's not the problem actually.
I finally could add the svg on the map and make it visible,
but, since svg are not like image tags, i cannot find a way to scale/size the svg with the google map like simple images would...
here is a google example, when you scale (mousewheel) the map, the custom overlay size is changing too :
https://developers.google.com/maps/documentation/javascript/examples/overlay-simple
And, here is the svg I tried to add on the map, you will notice that the div (container) is located at specific points (lat/lng), and scales correctly with mousewheel on the map. BUT, the svg layer I tried to add into it, is jut NOT into it at all, and, does not scale on mousewheel... the only point going fine with this svg layer is that it's working with map dragging...
svg layer should be contained in the defined div (with bounds...). Svg is a simple layer :
<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" class="svg-editor">
<g>
<rect id="svg_5" height="181" width="311" y="95.25" x="47.75" stroke-width="5" fill="#FF0000"/>
</g>
</svg>
here is the fiddle :
http://jsfiddle.net/7b3byzrf/27/
Thanks for help!
If you want your svg image to be correctly scaled, you need to have
a viewBox (you've put it, this part is OK)
no dimension in the svg element (here's the problem).
Remove those lines :
svg.setAttribute('width','400');
svg.setAttribute('height','400');
Demonstration

css - how do I make svgs responsive?

I am getting svg data by api call and appending it to div in a DOM. There are 13-14 svg elements I am getting and appending it to a single div. I want to display all this svgs in a row. If I give width: 5.5%; to svg elements, all the svgs display in a row. But when I resize window or monitor size is small, all svgs overlap each other. I've created an example in jsfiddle. Please find this fiddle
I tried with preserveAspectRatio and viewBox in svg but it's not working.
Update: I've updated fiddle. In a default size of resule in jsfiddle, overlapping is visible. I want it to be responsive.
How do I make these svgs responsive so that it doesn't overlap each other?
For these purpose better to use img tag:
<img src="path_to_svg" style="width: 5.5%" />
And in the svg file you should add attribute such as
<svg width="100%" height="100%"> .... </svg>
In this case image will resize as you want.

How to set svg print (in mm for CorelDraw) and real/preview (in px) sizes?

I have a basic SVG file, that has a fix 50mm x 25mm print size (so if I open it with CorelDraw the document size will be this.)
<svg
width=50mm
height=25mm
xmlns="http://www.w3.org/2000/svg"
version="1.1"
>
<g>
<text
x=0
y=55
font-family="Verdana"
font-size=55
fill="black"
>NOS?</text>
<line
class='v_pos'
stroke="green"
x1=0
y1=55
x2=500
y2=55
stroke-width="1"
/>
</g>
</svg>
How can I achieve 500x250 px size in the browser? The ratio does not change, but I need a fixed canvas size in the web-browser too.
I need reword/extend the problem:
I'd like to export the graphics (created in browser) to CorelDraw, as it can read SVG files. The canvas in browser is for example 500x250px, and every object are measured first in pixel. After the export everything must be resided, started from the canvas (to 50x25mm) followed by the objects:
So the questions are:
witch attribute is responsible for canvas width and height in CorelDraw?
is there any fast way (preserveAspectRatio, viewBox, style media) of resizing containing objects, or I have to convert every object's width,height,x,y, etc. attributes one by one?
Thank you for any advice!
There are two different size aspects of a SVG image: how much do you want to see from the infinite canvas, and how big should the resulting image be. The first one is defined by the viewBox, which contains x and y coordinates for the top-left corner, and a width and a height. The second one is defined using the width and height attributes or style properties.
So, you use the viewBox attribute to say that you're interested in the area inside the (0px, 0px) and (500px, 250px) rectangle, since that is what you see in the browser: viewBox="0 0 500 250"
Then, since you want the image to be displayed as 50mm wide and 25mm high, you set the width and height accordingly. You can do that either setting them as attributes on the root svg element, which means that you have to set them only when exporting, since otherwise they will apply in the browser as well, or you can set them using a style element valid only for print media.
For browsers, if you're defining the viewBox you don't need to specify the width and height explicitly, since by default the area defined in the viewBox is displayed pixel per pixel.
When dealing with different media, use stylesheet media selectors. And SVG has support for that natively, using the media attribute of the <style> element. The basic syntax would be:
<style media="something" type="text/css">
svg:root {
width: 50mm;
height: 25mm;
}
</style>
Now, depending on what you want to do, you can:
Use media="print" to specify the size for print media, letting the default width and height specified in the attributes set on the root <svg> element be used in all other cases
Use media="screen" to specify the target width and height just for browsers when using a screen to display, where screen is defined as: "Intended primarily for color computer screens".

Categories