custom embedded SVG glyphs not rendering - svg
I'm trying to create my own SVG font but it's not rendering. Using code from Mozilla's example here https://developer.mozilla.org/en-US/docs/Web/SVG/Element/glyph I wrote this:
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="640" height="346" viewBox="0 0 640 346">
<defs>
<font id="arial-hollow" horiz-adv-x="640">
<font-face font-family="Arial-Hollow" font-weight="bold" font-style="normal" units-per-em="500" cap-height="300" x-height="200" ascent="350" descent="150" alphabetic="0" mathematical="175" ideographic="200" hanging="250">
<font-face-src>
<font-face-name name="Arial-Hollow"/>
</font-face-src>
</font-face>
<glyph unicode="y" d="m 290.15467,345.00314 c -0.99838,-0.61637 -1.69965,-2.23572 -1.69965,-3.92482 0,-2.50765 0.35204,-2.8755 2.75182,-2.8755 1.5135,0 3.00684,-0.25593 3.31854,-0.56873 0.31171,-0.3128 -1.14514,-4.69641 -3.23743,-9.74136 -2.09229,-5.04495 -3.80416,-9.63645 -3.80416,-10.20334 0,-0.62947 1.9525,-0.91602 5.01577,-0.7361 4.94555,0.29048 5.03101,0.34919 6.1032,4.19319 1.15832,4.15281 1.83946,3.86929 2.92681,-1.21831 0.6524,-3.05249 0.85066,-3.1676 5.45598,-3.1676 2.62843,0 4.77897,0.41075 4.77897,0.9128 0,1.98567 -8.87091,24.97605 -10.12123,26.23077 -1.72468,1.73076 -9.29262,2.4547 -11.48862,1.099 z m 8.59567,-2.67299 c 1.58402,-1.06141 2.89916,-3.88879 6.66531,-14.32958 3.3272,-9.22389 3.35387,-9.41498 1.27187,-9.11243 -1.65647,0.24074 -2.46706,1.49296 -3.66669,5.66456 -2.14643,7.46397 -4.05584,7.47746 -6.29846,0.0446 -1.50399,-4.98488 -2.11995,-5.88738 -4.01815,-5.88738 l -2.24187,0 3.36686,8.01125 c 4.23089,10.06712 4.30363,12.27085 0.45319,13.72934 -1.60253,0.60702 -2.91369,1.44611 -2.91369,1.86464 0,0.96151 5.95103,0.97365 7.38163,0.015 z">
</glyph>
</font>
</defs>
<text x="100" y="100" font-family="Arial-Hollow">
y u no render??
</text>
</svg>
https://codepen.io/anon/pen/YvdBzp
The Mozilla developer page you linked states right at the top that <glyph> is deprecated. In fact, the whole concept of a SVG font is no longer working in current browsers, with the exception of Safari.
Related
How to embedd an SVG File into another SVG
I want to reference another SVG file in my main SVG file and show it there. The "svg1.svg": <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg id="main" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <path id="testPath" d="M 100 350 q 150 -300 300 0" stroke="blue" fill="none" /> </svg> The "referencing.svg": <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100"> <g transform="translate(20,20)"> <circle r="10" stroke="black" fill-opacity="20%" /> <use xlink:href="svg1.svg#main" x="10" /> </g> </svg> The referencing.svg should show the content of the svg1.svg but its not showing up at all. Both Svg-Files are in the same local Folder. The validator at https://validator.w3.org/check says the Syntax is correct. Am I missing something or does it not work like this at all?
Unable to upload SVG images to any glyph maker, but renders correctly in Inkscape
I've been trying to get an Operator-similar font to be created a TTF for, but for some reason it appears to be empty whenever I try to upload it to a service. I was able to render it in Inkscape correctly, so I don't think it would be a problem with the exact SVG image. Here is the uppercase B, for reference (simplified):
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg preserveAspectRatio="xMinYMin none" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="">
<g i:e="1" transform="matrix(10,27.5,0,1.25,0,-168)" style="height:auto;overflow-x:visible;overflow-y:visible;width:auto;perspective-origin:0px 0px;transform:matrix(10, 27.5, 0, 1.25, 0, -168);transform-origin:0px 0px;">
<i:p style="height:auto;overflow-x:visible;overflow-y:visible;width:auto;perspective-origin:50% 50%;transform-origin:0px 0px;"/>
<g q:rq="0" style="height:auto;overflow-x:visible;overflow-y:visible;width:auto;perspective-origin:0px 0px;transform-origin:0px 0px;">
<path fill="#414141" d="M3.773 86.883L4.0 81.723C3.766 80.938 3.52 80.418 3.258 80.211L2.938 87.258C2.676 99.059 2.43 110.379 2.195 121.488L2.414 116.656C2.492 113.035 2.566 109.441 2.645 105.77L3.539 86.129C3.617 86.344 3.699 86.59 3.773 86.883ZM3.078 85.84L3.105 85.207C3.234 85.43 3.359 85.652 3.48 85.957L2.703 103.063C2.828 97.375 2.953 91.605 3.078 85.84Z" style="height:auto;overflow-x:visible;overflow-y:visible;width:auto;perspective-origin:0px 0px;transform-origin:0px 0px;fill:rgb(65, 65, 65);d:path('M 3.773 86.883 L 4 81.723 C 3.766 80.938 3.52 80.418 3.258 80.211 L 2.938 87.258 C 2.676 99.059 2.43 110.379 2.195 121.488 L 2.414 116.656 C 2.492 113.035 2.566 109.441 2.645 105.77 L 3.539 86.129 C 3.617 86.344 3.699 86.59 3.773 86.883 Z M 3.078 85.84 L 3.105 85.207 C 3.234 85.43 3.359 85.652 3.48 85.957 L 2.703 103.063 C 2.828 97.375 2.953 91.605 3.078 85.84 Z');"/>
</g>
</g>
</svg>
Could this be a problem with the way it was created? I did try to resave it in Inkscape, but it doesn't seem to be working correctly even then.
As I tested you SVG it wasn't a valid code and didn't work for me, but its capital A and here's the new SVG below: <?xml version="1.0" encoding="utf-8"?> <svg width="100" height="100" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 27.2 32.6" enable-background="new 0 0 27.2 32.6" xml:space="preserve"> <g> <path d="M7.9,22.1L4.7,32H0.5L11.2,0.6H16L26.8,32h-4.3l-3.4-9.9H7.9z M18.2,18.9l-3.1-9c-0.7-2-1.2-3.9-1.6-5.7h-0.1 c-0.5,1.9-1,3.8-1.6,5.7l-3.1,9.1H18.2z"/> </g> </svg> Try that and let me know if it works. I added height and width but you can remove them or change the value
SVG position from x="0" y="0"
I try to write a text element in an SVG from x="50%" y="0". My text is not appears and I don't know why. Here is my SVG <?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="900px" height="706" viewBox="0 0 900 706" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink"> <text x="50%" y="0" text-anchor="middle" fill="#f00" text-anchor="middle" style="font-family: DINPro; font-size: 28px;">xxxx</text> </svg> I am not know the font-size it will be dynamically. If I am give y="20" then my text appears. But why is it? As I read here, the 0 0 it the left top corner of the SVG. Why is it? As you see, the the with and the height and the viewBox is the same. Do I miss something?
Add an dominant-baseline attribute to your text element and set to hanging. <?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="900px" height="706" viewBox="0 0 900 706" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink"> <text x="50%" y="0" fill="#f00" text-anchor="middle" style="font-family: DINPro; font-size: 28px;" dominant-baseline="hanging">xxxx</text> </svg> You have three options to change this: dominant-baseline – used to determine or re-determine a scaled-baseline-table alignment-baseline – specifies which baseline is to be aligned with the corresponding baseline of the parent baseline-shift – allows repositioning of the dominant-baseline relative to the dominant-baseline of the parent See this post for more information about this: http://vanseodesign.com/web-design/svg-text-baseline-alignment/
Per the SVG specification The Y coordinate of the bottom of a roman capital letter is usually zero. And the descenders on lowercase roman letters have negative coordinate values.
On a text element, y is the element bottom position. In your case, the text printed outside of the viewbox. Try to set your y to 20.
How can a SVG sprite be made using independent SVG images?
How can I combine SVG icons from http://raphaeljs.com/icons/ to make a CSS Sprite. When I do this: <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="30em" height="160em" viewBox="0 0 30 160" enable-background="new 0 0 30 160" xml:space="preserve"> <g id="icons"> <g id="linkedin"> <path d="M27.25,3.125h-22c-1.104,0-2,0.896-2,2v22c0,1.104,0.896,2,2,2h22c1.104,0,2-0.896,2-2v-22C29.25,4.021,28.354,3.125,27.25,3.125zM11.219,26.781h-4v-14h4V26.781zM9.219,11.281c-1.383,0-2.5-1.119-2.5-2.5s1.117-2.5,2.5-2.5s2.5,1.119,2.5,2.5S10.602,11.281,9.219,11.281zM25.219,26.781h-4v-8.5c0-0.4-0.403-1.055-0.687-1.213c-0.375-0.211-1.261-0.229-1.665-0.034l-1.648,0.793v8.954h-4v-14h4v0.614c1.583-0.723,3.78-0.652,5.27,0.184c1.582,0.886,2.73,2.864,2.73,4.702V26.781z" /> </g> <g id="github"> <path d="M 500 800 M28.436,15.099c-1.201-0.202-2.451-0.335-3.466-0.371l-0.179-0.006c0.041-0.09,0.072-0.151,0.082-0.16c0.022-0.018,0.04-0.094,0.042-0.168c0-0.041,0.018-0.174,0.046-0.35c0.275,0.01,0.64,0.018,1.038,0.021c1.537,0.012,3.145,0.136,4.248,0.331c0.657,0.116,0.874,0.112,0.389-0.006c-0.491-0.119-1.947-0.294-3.107-0.37c-0.779-0.053-1.896-0.073-2.554-0.062c0.019-0.114,0.041-0.241,0.064-0.371c0.093-0.503,0.124-1.009,0.126-2.016c0.002-1.562-0.082-1.992-0.591-3.025c-0.207-0.422-0.441-0.78-0.724-1.104c0.247-0.729,0.241-1.858-0.015-2.848c-0.211-0.812-0.285-0.864-1.021-0.708C22.19,4.019,21.69,4.2,21.049,4.523c-0.303,0.153-0.721,0.391-1.024,0.578c-0.79-0.278-1.607-0.462-2.479-0.561c-0.884-0.1-3.051-0.044-3.82,0.098c-0.752,0.139-1.429,0.309-2.042,0.511c-0.306-0.189-0.75-0.444-1.067-0.604C9.973,4.221,9.473,4.041,8.847,3.908c-0.734-0.157-0.81-0.104-1.02,0.708c-0.26,1.003-0.262,2.151-0.005,2.878C7.852,7.577,7.87,7.636,7.877,7.682c-1.042,1.312-1.382,2.78-1.156,4.829c0.059,0.534,0.15,1.024,0.277,1.473c-0.665-0.004-1.611,0.02-2.294,0.064c-1.162,0.077-2.618,0.25-3.109,0.369c-0.484,0.118-0.269,0.122,0.389,0.007c1.103-0.194,2.712-0.32,4.248-0.331c0.29-0.001,0.561-0.007,0.794-0.013c0.07,0.237,0.15,0.463,0.241,0.678L7.26,14.759c-1.015,0.035-2.264,0.168-3.465,0.37c-0.901,0.151-2.231,0.453-2.386,0.54c-0.163,0.091-0.03,0.071,0.668-0.106c1.273-0.322,2.928-0.569,4.978-0.741l0.229-0.02c0.44,1.022,1.118,1.802,2.076,2.41c0.586,0.373,1.525,0.756,1.998,0.816c0.13,0.016,0.508,0.094,0.84,0.172c0.333,0.078,0.984,0.195,1.446,0.262h0.011c-0.009,0.006-0.017,0.01-0.025,0.016c-0.56,0.291-0.924,0.744-1.169,1.457c-0.11,0.033-0.247,0.078-0.395,0.129c-0.529,0.18-0.735,0.217-1.271,0.221c-0.556,0.004-0.688-0.02-1.02-0.176c-0.483-0.225-0.933-0.639-1.233-1.133c-0.501-0.826-1.367-1.41-2.089-1.41c-0.617,0-0.734,0.25-0.288,0.615c0.672,0.549,1.174,1.109,1.38,1.537c0.116,0.24,0.294,0.611,0.397,0.824c0.109,0.227,0.342,0.535,0.564,0.748c0.522,0.498,1.026,0.736,1.778,0.848c0.504,0.074,0.628,0.074,1.223-0.002c0.287-0.035,0.529-0.076,0.746-0.127c0,0.244,0,0.525,0,0.855c0,1.766-0.021,2.334-0.091,2.5c-0.132,0.316-0.428,0.641-0.716,0.787c-0.287,0.146-0.376,0.307-0.255,0.455c0.067,0.08,0.196,0.094,0.629,0.066c0.822-0.051,1.403-0.355,1.699-0.891c0.095-0.172,0.117-0.518,0.147-2.318c0.032-1.953,0.046-2.141,0.173-2.42c0.077-0.166,0.188-0.346,0.25-0.395c0.104-0.086,0.111,0.084,0.111,2.42c-0.001,2.578-0.027,2.889-0.285,3.385c-0.058,0.113-0.168,0.26-0.245,0.33c-0.135,0.123-0.192,0.438-0.098,0.533c0.155,0.154,0.932-0.088,1.356-0.422c0.722-0.572,0.808-1.045,0.814-4.461l0.003-2.004l0.219,0.021l0.219,0.02l0.036,2.621c0.041,2.951,0.047,2.994,0.549,3.564c0.285,0.322,0.572,0.5,1.039,0.639c0.625,0.188,0.813-0.102,0.393-0.605c-0.457-0.547-0.479-0.756-0.454-3.994c0.017-2.076,0.017-2.076,0.151-1.955c0.282,0.256,0.336,0.676,0.336,2.623c0,2.418,0.069,2.648,0.923,3.07c0.399,0.195,0.511,0.219,1.022,0.221c0.544,0.002,0.577-0.006,0.597-0.148c0.017-0.115-0.05-0.193-0.304-0.348c-0.333-0.205-0.564-0.467-0.709-0.797c-0.055-0.127-0.092-0.959-0.117-2.672c-0.036-2.393-0.044-2.502-0.193-2.877c-0.201-0.504-0.508-0.902-0.897-1.166c-0.101-0.066-0.202-0.121-0.333-0.162c0.161-0.016,0.317-0.033,0.468-0.055c1.572-0.209,2.403-0.383,3.07-0.641c1.411-0.543,2.365-1.445,2.882-2.724c0.046-0.114,0.092-0.222,0.131-0.309l0.398,0.033c2.051,0.173,3.706,0.42,4.979,0.743c0.698,0.177,0.831,0.198,0.668,0.105C30.666,15.551,29.336,15.25,28.436,15.099zM22.422,15.068c-0.233,0.512-0.883,1.17-1.408,1.428c-0.518,0.256-1.33,0.451-2.25,0.544c-0.629,0.064-4.137,0.083-4.716,0.026c-1.917-0.188-2.991-0.557-3.783-1.296c-0.75-0.702-1.1-1.655-1.039-2.828c0.039-0.734,0.216-1.195,0.679-1.755c0.421-0.51,0.864-0.825,1.386-0.985c0.437-0.134,1.778-0.146,3.581-0.03c0.797,0.051,1.456,0.051,2.252,0c1.886-0.119,3.145-0.106,3.61,0.038c0.731,0.226,1.397,0.834,1.797,1.644c0.18,0.362,0.215,0.516,0.241,1.075C22.808,13.699,22.675,14.517,22.422,15.068zM12.912,11.762c-1.073-0.188-1.686,1.649-0.863,2.587c0.391,0.445,0.738,0.518,1.172,0.248c0.402-0.251,0.62-0.72,0.62-1.328C13.841,12.458,13.472,11.862,12.912,11.762zM19.425,11.872c-1.073-0.188-1.687,1.647-0.864,2.586c0.392,0.445,0.738,0.519,1.173,0.247c0.401-0.25,0.62-0.72,0.62-1.328C20.354,12.569,19.985,11.971,19.425,11.872zM16.539,15.484c-0.023,0.074-0.135,0.184-0.248,0.243c-0.286,0.147-0.492,0.096-0.794-0.179c-0.187-0.169-0.272-0.258-0.329-0.081c-0.053,0.164,0.28,0.493,0.537,0.594c0.236,0.094,0.405,0.097,0.661-0.01c0.254-0.106,0.476-0.391,0.476-0.576C16.842,15.303,16.595,15.311,16.539,15.484zM16.222,14.909c0.163-0.144,0.2-0.44,0.044-0.597s-0.473-0.133-0.597,0.043c-0.144,0.206-0.067,0.363,0.036,0.53C15.865,15.009,16.08,15.034,16.222,14.909z" /> </g> </g> </svg> the SVG icons overlap. How can I modify these to have an offset between two icons? For instance, the one similar to http://dbushell.com/demos/css-sprites/sprite.svg
Try to replace the 2nd M command to m command. "M" means absolute position, "m" means relative position. so, <M 500 800 ｍ28.436,15.099c-1.201-0.202-2.…
SVG rotate deletes Elements
I'm trying to generate svg-Code in a web-application. Here's an example output: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" version="1.1" baseProfile="full" width="1000px" height="600px"> <rect x="147.50198255352893" y="109.43695479777953" width="15.860428231562253" height="295.79698651863595" stroke="rgb(0,0,0)" fill="rgb(255,255,255)" stroke-width="3" transform="rotate(20 155.43219666931006 257.3354480570975)"/> <rect x="163.36241078509119" y="405.2339413164155" width="379.85725614591587" height="-23.79064234734335" stroke="rgb(0,0,0)" fill="rgb(255,255,255)" stroke-width="3" transform="rotate(20 353.2910388580491 393.3386201427438)"/> <rect x="543.219666931007" y="381.44329896907215" width="22.204599524187188" height="-353.6875495638382" stroke="rgb(0,0,0)" fill="rgb(255,255,255)" stroke-width="3" transform="rotate(20 554.3219666931006 204.59952418715304)"/> </svg> There should be three rotated Rectangles, but somehow in Chrome, Safari, and Inkscape only one of them is displayed. I did google and have no clue what is wrong.
Your problem is caused by the negative heights of the second and third <rect />. If you generate this code automatically make sure these values are positive. For example, using JavaScript, wrap them up in Math.abs( height ).