We can create shapes like rectangle, circle etc. Can we create a rectangle inside another rectangle?
You can't create a rectangle inside an other rectangle. But you can make 2 rectangles to look so.
You use the <rect> tag for rectangles. By looking at the rectangle description in the specifications, you can see that the content model don't allow <rect> to contain an other <rect> (or shape).
An example of what you can do :
<rect x="0" y="0" width="200" height="100"/>
<rect x="25" y="25" width="150" height="50"/>
You can also add a <g> around those two rectangles to group them, like this :
<g>
<rect x="0" y="0" width="200" height="100"/>
<rect x="25" y="25" width="150" height="50"/>
</g>
More explanations here : http://www.w3.org/TR/SVG/struct.html#Groups
You also have the alternative of using a path to draw 2 rectangles with only one tag. It all depend of your needs.
Related
I'm trying to create a svg button with transparent text. It looks like there is no way to do it easily in React-native, so maybe I'll just create an svg, that will have transparent text. How do I do that?
I've tried to do it in Figma, but it looks like the only way to do it there is to put a specific image behind. Text can't be truly transparent, it can only mask a picture.
You can use an svg mask with a white rectangle and a black text. The shapes you have - like the rectangle with rounded corners in this example - will be painted only under the white parts of the mask. Since the text is black it will apear like a hole.
svg{border:solid; background:silver;}
<svg>
<mask id="m">
<rect x="10" y="10" width="280" height="130" fill="white" />
<text x="150" y="75" font-size="90" font-family="arial" dominant-baseline="middle" text-anchor="middle" fill="black">text</text>
</mask>
<rect x="10" y="10" width="280" height="130" rx="20" mask="url(#m)" />
</svg>
I'm new to the svg library (HTML5 svg tag and related) and trying to learn. I'm working on a little diagram editor in VueJS using svg. I know how to create a rectangle and even a path from one rectangle/circle/etc to another, but I'm not unclear how to approach creating a path that starts and ends at the same rectangle (i.e., a loop) - something like this
I don't care that much where the start and end points intersect the rectangle, though I'd prefer they were relatively close to one another or at least on the same edge of the rectangle.
Thanks for any nudges in the right direction.
Just create a <path> that consists of a bezier curve whose control points form a rectangle.
<svg viewBox="0 0 100 100">
<rect x="50" y="10" width="50" height="40" fill="#4472c4"/>
<path d="M 50,20 C 10,20 10,40, 50,40" fill="none" stroke="red"/>
<!-- Show grey lines to indicate the bezier control points -->
<line x1="50" y1="20" x2="10" y2="20" fill="none" stroke="lightgrey" stroke-width="0.5"/>
<line x1="50" y1="40" x2="10" y2="40" fill="none" stroke="lightgrey" stroke-width="0.5"/>
</svg>
I created an SVG image as defined by the code below. The issue I am having is that the SVG image is being rendered incorrectly. The z-order of the elements in my SVG are incorrectly being rendered.
Issue: There are 3x rectangles (color = white), which are above another rectangle (color=red). These 3x rectangles are positioned to have the same y-axis as the red rectangle behind it and have the same height. Despite this positioning/height, there is a "red" border that seems to be visible on the edge of the white rectangle due to the red rectangle in the back. It seems that z-order or stacking order of the elements in the rendered image is not being respected.
Below is a screenshot of the SVG image open in the Inkscape showing the issue. Even after converting the SVG image to PNG, the z-order issue still existing.
After troubleshooting with the position, I noticed the issue randomly disappears depending on the value of the y-axis position, or SVG image size (pixels/width/height). For example, if you change edit the SVG from y="2.5807" to y="2.5", the issue goes however. However, this is a NOT a feasible solution for my issue, but the exact positing and SVG image size properties is are fixed can shouldn't be changed.
Updates
I tried #Robert Longson suggestion of using shape-rendering="crispEdges" on the root SVG. It did NOT solve the issue for my use case. Using his suggestion, it does solve the issue on how the image is rendered in a browser, however the issue is still visible in Inkscape or when SVG is converted to PNG. For my use case, I care about how the SVG is rendered after being converted to PNG.
I just found out shape-rendering="crispEdges does work when SVG is converted to PNG, but its dependent on how the conversion process works. If I use rsvg-convert command in Bash, which is provided by librsvg2-bin, to convert the SVG to PNG, the issue is fixed. However, if I use convert command in Bash, which is provided by ImageMagick, the issue still exist. If open the SVG file in Inkscape and then Export as PNG, then the issue still exist.
<svg baseProfile="full" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xlink="http://www.w3.org/1999/xlink" width="912px" height="1140px" preserveAspectRatio="none" viewBox="0,0,8.0,5.0">
<rect x="0" y="0" width="8.0" height="5.0" fill="white" />
<rect x="0" y="2.5807" width="8.0" height="1.0" fill="red" />
<g transform="translate(2.9275,0)">
<rect x="0" y="2.5807" width="0.5" height="1.0" fill="white" />
<rect x="1.0" y="2.5807" width="1.0" height="1.0" fill="white" />
<rect x="2.5" y="2.5807" width="1.5" height="1.0" fill="white" />
</g>
</svg>
that's antialiasing you can turn it off with shape-rendering="crispEdges"
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="912px" height="1140px" preserveAspectRatio="none" viewBox="0,0,8.0,5.0" shape-rendering="crispEdges">
<rect x="0" y="0" width="8.0" height="5.0" fill="white" />
<rect x="0" y="2.5807" width="8.0" height="1.0" fill="red" />
<g transform="translate(2.9275,0)">
<rect x="0" y="2.5807" width="0.5" height="1.0" fill="white" />
<rect x="1.0" y="2.5807" width="1.0" height="1.0" fill="white" />
<rect x="2.5" y="2.5807" width="1.5" height="1.0" fill="white" />
</g>
</svg>
I have an svg which has multiple stroked paths, and a rectangle shape behind them that has the shape of the paths cut out of them. Effectively, the stroked paths should be "plugging the holes" in the rectangle shape.
The reason for this is that I would like to animate the paths so that they are erased, revealing what is underneath through the holes in the rectangle shape.
That's all well and good, and the animation works fine. The problem is that there is a hairline-thin space between the holes and the outside of the path strokes, so you can see what is underneath even while the paths are still there. You can see a screen capture of that here:
How do I avoid this happening? The space is not in the svg, because making it bigger on the page still has the space hairline thin:
I figure it has something to do with the aliasing, but have no idea how to combat it. I can't just apply a thicker stroke to the paths, because then the stroke starts to bleed into the other shapes, as seen here:
What else is there to do?
You could use a mask instead of a clip-path, since masks allow using the stroke to define the masked area.
<mask id="strokemask" maskContentUnits="objectBoundingBox"
x="0" y="0" width="100%" height="100%">
<circle cx="0.5" cy="0.5" r="0.1" stroke="white" fill="white"
stroke-width="0.02"/>
<circle cx="0.5" cy="0.5" r="0.15" stroke="white" fill="none"
stroke-width="0.03"/>
<circle cx="0.5" cy="0.5" r="0.22" stroke="white" fill="none"
stroke-width="0.05"/>
<circle cx="0.5" cy="0.5" r="0.3" stroke="white" fill="none"
stroke-width="0.06"/>
</mask>
Here's a live example of an animated mask that uses some stroked circles.
I want to create a SVG graphic that loads an external SVG file, stores it as a symbol into its defs section and uses this symbol in the main section:
<svg width="1000" height="1000">
<defs>
<symbol id="sym1" width="50" height="50" viewBox="0 0 45 45">
<svg width="45" height="45">
<rect x="0" y="0" width="45" height="45" style="stroke:red;stroke-width:1;fill:none"/>
</svg>
</symbol>
</defs>
<rect x="100" y="100" width="50" height="50" style="stroke:black;stroke-width:1;fill:none"/>
<use x="100" y="100" xlink:href="#sym1"></use>
</svg>
http://jsfiddle.net/tx0rpxdf/4/
One frame condition is that I cannot change the inner SVG element, because it will be loaded from an external file.
The symbol should have a size of 50x50, so I define its width and height accordingly. I know that the inner SVG element has a size of 45x45, so I define its viewBox as "0 0 45 45".
To test the usage of the symbol, I create a black rectangle of size 50x50 and place a symbol instance at the same position. The lines should match.
But they don't match using Chrome (Chromium) on Debian Jessie. Even worse, it produces different results in Firefox and Opera.
What's the problem here and how can I produce the correct result in all browsers that support SVG?
There are a couple of issues:
a <rect> with width/height 45 and a stroke-width of 1 is not 45 user units wide, it's 46 user units wide as the stroke pokes out inside by 0.5 of a unit and outside by 0.5 of a unit on each edge. If you can't change the inner <svg> element then you won't be able to fix this issue though.
drawing two shapes one on top of another will not make one hide another as there will be antialiasing in effect. shape-rendering="optimizeSpeed" can prevent this.