SVG change text via attribute - svg
I want to manually create an svg of a directory tree, and thought it would be nice to do it in a way that makes it easy to add, move or delete elements from that tree (without having to repeat myself too much).
While skimming through the svg specification i noticed the <use> element, which allows to "include" other elements with the option to override some of the attributes. So what i would like to do is define the symbol for a folder (or file), including the corresponding label, and then set the actual text of the label via <use>.
Essentially something like this (which doesn't work of course):
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<symbol id="folder">
<g width="24" height="24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" />
</g>
<text x="28" y="12" dominant-baseline="middle">my_text</text>
</symbol>
</defs>
<g>
<use href="#folder" my_text="root"/>
<g transform="translate(24)">
<use y="24" href="#folder" my_text="foo"/>
<g transform="translate(24)">
<use y="48" href="#folder" my_text="bar"/>
</g>
<use y="72" href="#folder" my_text="hello"/>
<use y="96" href="#folder" my_text="world"/>
</g>
</g>
</svg>
So, is there any way to use the value of an attribute as the actual text of a <text> element?
PS: Please note that this svg file is not supposed to be part of a web page, but should be rendered correctly when i open it in another application (like inkscape, or any other svg editor/viewer) or generate a pdf from an Asciidoc document.
Related
SVG rendering issue. SVGs are rendered differently on different Shopify product pages
I've a strange effect with SVGs and have no idea how to handle it.
The SVGs are rendered on Shopify product pages based on metafield values. E.g. when a product has a TRUE in the metafield for vegan, then the SVG for vegan is displayed. I've about 10 metafields for breathable, high-density, repellent, windbreaker etc.
Shopify's metafields are kind of hidden properties and their values can be accessed through Shopify Liquid templating language. On a product page I check e.g. if metafields.product-icons.vegan is TRUE. If yes, the SVG is rendered (the icons in the bottom right).
The product page above is an example which produces a correct result. Every icon is displayed fully.
My problem is that on some product pages the icons are rendered correctly and on some parts of the SVGs are missing. On the image below. look at the right vegan icon, where the top part is missing:
In this example other parts of the high-density icon in the middle are missing than in the one above, whereas on the first image the icon is complete.
I checked different machines and networks to see if it's a caching issue. But it isn't.
Every product uses the same template, hence the same liquid code and SVGs.
Any idea what I check further?
Here an example for an SVG which was rendered properly and and with missing parts on two different pages
<svg version="1.1" baseProfile="basic" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 76.5 76.5" xml:space="preserve">
<style type="text/css">
.st0{display:none;}
.st1{fill:none;stroke:#000000;stroke-width:2;}
.st2{fill:#FFFFFF;}
.st3{fill:none;stroke:#FFFFFF;stroke-width:5;}
.st4{fill:none;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.st5{display:inline;}
.st6{font-family:'Akkurat-Bold';}
.st7{font-size:7.0024px;}
.st8{display:inline;fill:#2B3427;}
.st9{fill:none;stroke:#2B3427;stroke-width:2;}
.st10{fill:none;stroke:#2B3427;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.st11{display:inline;fill:#FFFFFF;}
.st12{fill:#2B3427;}
</style>
<g id="Vorlagen" class="st0">
</g>
<g id="Kreis_Black">
<path d="M38.3,4.8c18.4,0,33.4,15,33.4,33.4s-15,33.4-33.4,33.4S4.8,56.7,4.8,38.3S19.8,4.8,38.3,4.8 M38.3,2.8
C18.7,2.8,2.8,18.7,2.8,38.3s15.9,35.4,35.4,35.4s35.4-15.9,35.4-35.4S57.8,2.8,38.3,2.8L38.3,2.8z"/>
<path d="M38.3,4.8c18.4,0,33.4,15,33.4,33.4s-15,33.4-33.4,33.4S4.8,56.7,4.8,38.3S19.8,4.8,38.3,4.8 M38.3,2.8
C18.7,2.8,2.8,18.7,2.8,38.3s15.9,35.4,35.4,35.4s35.4-15.9,35.4-35.4S57.8,2.8,38.3,2.8L38.3,2.8z"/>
</g>
<g id="Illu">
<g>
<path class="st1" d="M35.2,43.3c-1.5,1-9.1,3.6-14.7-1.1c-4-3.3-4.4-8.7-3.6-24.9c9.5-0.9,17.4,0.9,22,5c4.1,3.6,3.9,8.6,4.3,11.2
C43.6,36.5,39.5,40.4,35.2,43.3z"/>
<path class="st2" d="M44.8,41.6c9.7,6,18.3-7.2,20.2-15.9c-5.5-3.6-13-2.3-17.7,0.6C43.8,28.5,39.2,35,44.8,41.6"/>
<path class="st3" d="M44.8,41.6c9.7,6,18.3-7.2,20.2-15.9c-5.5-3.6-13-2.3-17.7,0.6C43.8,28.5,39.2,35,44.8,41.6z"/>
<path class="st2" d="M44.8,41.6C57.2,51.9,63,36.7,64.9,25.7c-8.2-3.9-13-2.3-17.7,0.6C43.8,28.5,39.2,35,44.8,41.6"/>
<path class="st1" d="M44.8,41.6C57.2,51.9,63,36.7,64.9,25.7c-8.2-3.9-13-2.3-17.7,0.6C43.8,28.5,39.2,35,44.8,41.6z"/>
<path class="st4" d="M22.7,22.6c0,0,14.8,6,11.3,43.2c0,0,12.4-31.6,24-36.1"/>
</g>
<rect x="21.1" y="47.3" class="st2" width="32.6" height="8.1"/>
</g>
<g id="Typo" class="st0">
<text transform="matrix(1 0 0 1 25.4238 53.8332)" class="st5 st6 st7">VEGAN</text>
</g>
<g id="Typo_Gepfadet">
<g>
<path d="M28.1,53.8h-1l-1.6-5h1l1.2,3.8l1.2-3.8h0.9L28.1,53.8z"/>
<path d="M30.8,53.8v-5h3.5v0.8h-2.6v1.2H34v0.8h-2.3V53h2.6v0.8H30.8z"/>
<path d="M38.9,53.8l-0.1-0.5c-0.1,0.3-0.6,0.6-1.2,0.6c-0.6,0-1.1-0.1-1.5-0.6c-0.5-0.5-0.6-1.2-0.6-2s0.1-1.5,0.6-2
c0.4-0.4,0.9-0.6,1.5-0.6c0.6,0,1.1,0.2,1.5,0.6c0.2,0.3,0.4,0.6,0.5,1h-0.9c0-0.2-0.1-0.3-0.2-0.5c-0.2-0.2-0.4-0.3-0.8-0.3
c-0.3,0-0.6,0.1-0.8,0.3c-0.3,0.4-0.4,1-0.4,1.4s0,1.1,0.4,1.5c0.2,0.2,0.5,0.3,0.8,0.3c0.3,0,0.6-0.1,0.7-0.3
c0.3-0.3,0.3-0.6,0.3-1h-1.2v-0.8h2.1v2.7H38.9z"/>
<path d="M44,53.8l-0.3-1h-2l-0.3,1h-0.9l1.7-5h1l1.7,5H44z M42.7,50L42,52.1h1.4L42.7,50z"/>
<path d="M49.1,53.8l-2.2-3.4v3.4H46v-5h1l2.1,3.4v-3.4H50v5H49.1z"/>
</g>
</g>
<g id="Ikons_x5F_Grün" class="st0">
<path class="st8" d="M38.3,4.8c18.4,0,33.4,15,33.4,33.4s-15,33.4-33.4,33.4S4.8,56.7,4.8,38.3S19.8,4.8,38.3,4.8 M38.3,2.8
C18.7,2.8,2.8,18.7,2.8,38.3s15.9,35.4,35.4,35.4s35.4-15.9,35.4-35.4S57.8,2.8,38.3,2.8L38.3,2.8z"/>
<path class="st8" d="M38.3,4.8c18.4,0,33.4,15,33.4,33.4s-15,33.4-33.4,33.4S4.8,56.7,4.8,38.3S19.8,4.8,38.3,4.8 M38.3,2.8
C18.7,2.8,2.8,18.7,2.8,38.3s15.9,35.4,35.4,35.4s35.4-15.9,35.4-35.4S57.8,2.8,38.3,2.8L38.3,2.8z"/>
<g class="st5">
<path class="st9" d="M35.2,43.3c-1.5,1-9.1,3.6-14.7-1.1c-4-3.3-4.4-8.7-3.6-24.9c9.5-0.9,17.4,0.9,22,5c4.1,3.6,3.9,8.6,4.3,11.2
C43.6,36.5,39.5,40.4,35.2,43.3z"/>
<path class="st2" d="M44.8,41.6c9.7,6,18.3-7.2,20.2-15.9c-5.5-3.6-13-2.3-17.7,0.6C43.8,28.5,39.2,35,44.8,41.6"/>
<path class="st3" d="M44.8,41.6c9.7,6,18.3-7.2,20.2-15.9c-5.5-3.6-13-2.3-17.7,0.6C43.8,28.5,39.2,35,44.8,41.6z"/>
<path class="st2" d="M44.8,41.6C57.2,51.9,63,36.7,64.9,25.7c-8.2-3.9-13-2.3-17.7,0.6C43.8,28.5,39.2,35,44.8,41.6"/>
<path class="st9" d="M44.8,41.6C57.2,51.9,63,36.7,64.9,25.7c-8.2-3.9-13-2.3-17.7,0.6C43.8,28.5,39.2,35,44.8,41.6z"/>
<path class="st10" d="M22.7,22.6c0,0,14.8,6,11.3,43.2c0,0,12.4-31.6,24-36.1"/>
</g>
<rect x="21.1" y="47.3" class="st11" width="32.6" height="8.1"/>
<g class="st5">
<path class="st12" d="M28.1,53.8h-1l-1.6-5h1l1.2,3.8l1.2-3.8h0.9L28.1,53.8z"/>
<path class="st12" d="M30.8,53.8v-5h3.5v0.8h-2.6v1.2H34v0.8h-2.3V53h2.6v0.8H30.8z"/>
<path class="st12" d="M38.9,53.8l-0.1-0.5c-0.1,0.3-0.6,0.6-1.2,0.6c-0.6,0-1.1-0.1-1.5-0.6c-0.5-0.5-0.6-1.2-0.6-2s0.1-1.5,0.6-2
c0.4-0.4,0.9-0.6,1.5-0.6c0.6,0,1.1,0.2,1.5,0.6c0.2,0.3,0.4,0.6,0.5,1h-0.9c0-0.2-0.1-0.3-0.2-0.5c-0.2-0.2-0.4-0.3-0.8-0.3
c-0.3,0-0.6,0.1-0.8,0.3c-0.3,0.4-0.4,1-0.4,1.4s0,1.1,0.4,1.5c0.2,0.2,0.5,0.3,0.8,0.3c0.3,0,0.6-0.1,0.7-0.3
c0.3-0.3,0.3-0.6,0.3-1h-1.2v-0.8h2.1v2.7H38.9z"/>
<path class="st12" d="M44,53.8l-0.3-1h-2l-0.3,1h-0.9l1.7-5h1l1.7,5H44z M42.7,50L42,52.1h1.4L42.7,50z"/>
<path class="st12" d="M49.1,53.8l-2.2-3.4v3.4H46v-5h1l2.1,3.4v-3.4H50v5H49.1z"/>
</g>
</g>
</svg>
How to merge two svg flile
I have two files(svg) from get font-awesome 1 Icon search https://fontawesome.com/icons/search?style=solid 2 Icon desktop https://fontawesome.com/icons/desktop?style=solid I would like to get finish result like I'm sorry, I can't use Adobe Illustrator Thank you in advance your diligence
Im putting both paths (the computer #cp and the magnifying glass) in the same svg element. Please note that the magnifying glass is a symbol and has it's own viewBox attribute. This will allow me to resize it and position it as needed by using a <use> element with a position (x, y) and a size (width): <use xlink:href="#mg" fill="red" width="300" x="400" y="100" stroke-width="30" stroke="white" paint-order = "stroke fill" /> I hope you'll find this useful: <svg viewBox="0 0 700 540" > <defs> <symbol viewBox="-20 0 500 438" id="mg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M287.686,317.613c-44.246,32.716-92.632,44.711-145.867,34.022 c-44.507-8.937-80.279-32.364-107.23-68.768C-17.896,211.978-9.703,111.877,52.721,50.913 c65.372-63.843,167.875-67.842,237.902-10.879c64.849,52.75,93.084,159.289,27.631,247.105c4.34,0,8.222,0.143,12.089-0.031 c6.949-0.312,12.7,2.262,17.505,7.059c27.479,27.436,54.99,54.837,82.342,82.398c10.109,10.187,9.872,21.971-0.188,32.144 c-7.265,7.347-14.526,14.699-21.934,21.901c-9.676,9.407-20.949,9.446-30.493-0.055c-27.99-27.865-55.854-55.857-83.824-83.743 c-5.25-5.234-6.842-11.599-6.585-18.683C287.279,324.973,287.475,321.819,287.686,317.613z M68.576,177.429c-0.658-58.105,47.084-109.266,109.23-109.212 c60.523,0.052,109.069,48.696,109.216,109.302c0.145,60.339-48.154,109.597-109.557,109.436 C115.029,286.791,67.692,235.734,68.576,177.429z"/> </symbol> </defs> <g id="cp"> <path fill-rule="evenodd" d="M355.128,397.23c4.431,13.312,8.741,26.191,12.992,39.09 c0.933,2.829,3.232,1.861,5.027,1.868c19.163,0.074,38.327-0.067,57.488,0.113c11.443,0.107,20.518,9.763,20.256,21.033 c-0.233,10.074-8.367,18.81-18.422,19.729c-1.655,0.151-3.329,0.136-4.994,0.136c-75.652,0.009-151.304-0.029-226.955,0.067 c-8.242,0.011-15.168-2.292-19.817-9.298c-4.163-6.274-4.849-13.108-1.293-19.912c3.73-7.136,9.618-11.604,17.847-11.695 c18.994-0.211,37.993-0.229,56.985,0.009c4.068,0.051,5.775-1.184,6.953-5.021c3.267-10.639,6.842-21.191,10.627-31.657 c1.416-3.917,0.533-4.573-3.4-4.564c-52.822,0.118-105.646,0.12-158.468,0.051c-18.57-0.024-32.642-9.713-39.553-26.76 c-2.249-5.548-2.435-11.332-2.434-17.184c0.015-49.49,0.002-98.98,0.003-148.47c0.001-40.492-0.057-80.984,0.044-121.476 c0.046-18.598,10.123-32.75,27.482-39.483c5.455-2.116,11.1-2.012,16.745-2.013c94.647-0.024,189.296-0.016,283.943-0.012 c40.658,0.002,81.319,0.241,121.975-0.085c18.796-0.151,33.316,10.927,39.614,26.602c2.225,5.539,2.468,11.321,2.466,17.178 c-0.024,58.322-0.019,116.644-0.019,174.965c-0.001,30.827-0.705,61.676,0.232,92.475c0.729,23.897-17.471,44.839-44.371,44.501 c-51.481-0.646-102.977-0.188-154.466-0.187C359.634,397.23,357.65,397.23,355.128,397.23z M314.081,96.229c61.994,0,123.988,0.045,185.981-0.096 c4.433-0.01,5.834,0.936,5.824,5.659c-0.16,78.492-0.163,156.984,0.005,235.477c0.01,4.762-1.452,5.607-5.818,5.604 c-123.987-0.112-247.976-0.114-371.963-0.003c-4.371,0.004-5.832-0.848-5.821-5.604c0.166-78.491,0.163-156.984,0.006-235.476 c-0.009-4.686,1.333-5.693,5.805-5.683c61.994,0.145,123.988,0.098,185.981,0.098C314.081,96.212,314.081,96.22,314.081,96.229z"/> </g> <use xlink:href="#mg" width="300" x="400" y="100" stroke-width="30" stroke="white" paint-order = "stroke fill" /> </svg>
transform property not working in IE on <use> in svg image when svg image importing from external html file
index.html <div class="button-icon"> <svg width="950px" height="605px" viewBox="0 0 950 605" > <use xlink:href="assets/svgs/front-view-1-g2.svg#front-view-1-g2" /> </svg> </div> front-view-1-g2.svg <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" > <defs> <g id="dark-rectangle" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" > <text id="2" font-family="AvenirPrimaryHMHMath" font-size="10" width="12" height="12" font-weight="normal" fill="#000000"> <tspan x="83" y="15">31</tspan> </text> <rect id="path-1" transform="translate(83.000000, 17.000000)" x="0" y="0" width="12" height="12" fill="#9b9b9b" ></rect> </g> </defs> <g id="iPad" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="front-view-1-g2"> <use xlink:href="#dark-rectangle"></use> <use transform="translate(110.000000, 0.000000)" xlink:href="#dark-rectangle"></use> </g> </g> </svg> i have only one group but needed to call it 2 times and change the position of second group and that is why i used transform to second use tag but its not working in IE browser. if i put use tag in html file then also transform not working in IE. it works properly in Chrome and Mozilla. Note : use tag not working when mentioned in .svg file and transform not working when use mentioned in .html file.
Hey I found the answer for this. Transform will work on use tag in IE as IE will not render tag, it directly renders particular group's child elements from .svg file. In above case of mine, I need to create another rectangle group assign transform to it and use that group.
svg draw circle with curved text inside
I need to draw red cirle with two curved string inside like that: upper string always be 3 chars length lower string can be from 1 to 20 chars length UPDATE1: I try to use textpath and circle tags, but I think I need to change some coordinates: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <circle cx="40" cy="40" r="24" style="stroke:#006600; fill:none"/> <defs> <path id="myTextPath" d="M75,20 a1,1 0 0,0 150,0" /> </defs> <text x="5" y="50" style="stroke: #000000;"> <textPath xlink:href="#myTextPath" > string </textPath> </text> </svg> Also I didnt clear understand <path> 'd' atrribute , but I found out that I can change starting point to M10,20 but how I can change text curve orientation? d="M10,20 a1,1 0 0,0 150,0"
To have text that "hangs" from a line nicely, the best way right now is to use a path with a smaller radius. There is an attribute to adjust the text's baseline, but that doesn't work reliably. So you need two arcs. One for the bottom half of the circle, and one with a smaller radius for the top half. They also need to both start from the left. That means one will go clockwise, and the other will go anti-clockwise. You control that with the arc command's "sweep" flag. We need to also use startOffset="50%" and text-anchor="middle" to centre the text on the paths. <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 80 80"> <defs> <path id="tophalf" d="M26,40 a14,14 0 0,1 28,0" /> <path id="lowerhalf" d="M16,40 a24,24 0 0,0 48,0" /> </defs> <circle cx="40" cy="40" r="24" style="stroke:#006600; fill:none"/> <path d="M16,40 a24,24 0 0,0 48,0" style="stroke:#600; fill:none"/> <text x="5" y="50" style="stroke: #000000;" text-anchor="middle"> <textPath xlink:href="#tophalf" startOffset="50%">str</textPath> </text> <text x="5" y="50" style="stroke: #000000;" text-anchor="middle"> <textPath xlink:href="#lowerhalf" startOffset="50%">second st</textPath> </text> </svg> This works fine in FF, but unfortunately, it seems there are bugs in Chrome and IE right now that is causing the text to not be centred properly on those browsers.
Grouping several SVG's into one object
I'm trying to reuse an SVG sprite icone into new SVG object. The new object is just a circle that contains the icon from the sprite. I understand that I need to use the defs tag to group some shapes together, But i have have a problem referencing my sprite icone inside the defs tag. sprite: <svg style="display:none;"> <symbol id="icon_1" viewBox="0 0 54 54"> <path d="M10.6 29.3h14.5V44H10.6z" class="st0"/> <path d="M25 29.3h14.5V44H25zm-7.2-14.7h14.5v14.7H17.8zm0 0l3.9-4m10.6 4l3.9-4m-3.9 18l3.9-3.7m-25.6 4.4l4.3-4.4m24.6 4.7l3.9-4M39.5 44l3.9-4M21.2 10.6h15M14.5 24.9h3.3m17.7.6h7.9M36.2 10v15.5m7.2.1V40" class="st0"/> </symbol > new object: <svg><defs> <g id="shape"> <circle cx="40" cy="40" r="40" fill="rgba(124,240,10,0.5)" /> <image x="0" y="0" xlink:href="#icon_1"></image> </g> I read that i can use image tags to reference SVG elements. obviously i'm doing something wrong. Basically the expected result should be a stroked circle with the icon inside in a way that I will be able to animate the entire object Thanks
You were close. Your main problem was that you were careless with your opening and closing tags. Your second SVG had a stray opening <defs> element, which meant that the <g id="shape"> element was left inside the <defs> section. <defs> is for defining elements to be re-used later, and anything in a <defs> will only be drawn when referenced from elsewhere. There were a couple of other problems. You can't use an <image> to reference a symbol. You will need to use a <use> for that. You will need to supply a width and height so that the symbol gets draw at an appropriate size. <svg width="0" height="0"> <defs> <symbol id="icon_1" viewBox="0 0 54 54"> <path d="M10.6 29.3h14.5V44H10.6z" class="st0"/> <path d="M25 29.3h14.5V44H25zm-7.2-14.7h14.5v14.7H17.8zm0 0l3.9-4m10.6 4l3.9-4m-3.9 18l3.9-3.7m-25.6 4.4l4.3-4.4m24.6 4.7l3.9-4M39.5 44l3.9-4M21.2 10.6h15M14.5 24.9h3.3m17.7.6h7.9M36.2 10v15.5m7.2.1V40" class="st0"/> </symbol> </defs> </svg> new object: <svg> <g id="shape"> <circle cx="40" cy="40" r="40" fill="rgba(124,240,10,0.5)" /> <use x="0" y="0" width="80" height="80" xlink:href="#icon_1"></use> </g> </svg>
The image tag is designed to be used with complete images, not fractions. I guess that use is the right tag for your use case. <?xml version="1.0" encoding="UTF-8"?> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"> <symbol id="icon_1" viewBox="0 0 54 54"> <path d="M10.6 29.3h14.5V44H10.6z" class="st0"/> <path d="M25 29.3h14.5V44H25zm-7.2-14.7h14.5v14.7H17.8zm0 0l3.9-4m10.6 4l3.9-4m-3.9 18l3.9-3.7m-25.6 4.4l4.3-4.4m24.6 4.7l3.9-4M39.5 44l3.9-4M21.2 10.6h15M14.5 24.9h3.3m17.7.6h7.9M36.2 10v15.5m7.2.1V40" class="st0"/> </symbol> <defs> <g id="shape"> <circle cx="40" cy="40" r="40" fill="rgba(124,240,10,0.5)" /> <use x="2" y="-3" width="80" height="80" xlink:href="#icon_1"/> </g> </defs> <use xlink:href="#shape"/> </svg> Also, if the sprite is in a separate file, you have to reference the symbol within that file: <use hlink:href="sprites.svg#icon1"/>.