SVG text on 2 lines in mobile break the rules - svg
I created an svg composit by a shape and a text over. I give the style to all the elements and works good EXCEPT for the mobile. In the simulator the text looks good but using smartphone to navigate the website the text doesn't follow the rules set.
This is the result from the simulator in Chrome desktop
And this is the real rendering in Chrome and Safari for iPhone
The second line (tspan) doesn't follow the y instruction (i also tested dy, but the result is the same) and brake the word after the first letter
The code is
<svg width="185" height="84" viewBox="0 0 185 84" fill="none" xmlns="http://www.w3.org/2000/svg">
<style>.wph-btn-ctg { font-family: Montserrat;
font-style: normal;
font-weight: bold;
font-size: 18px;
line-height: 22px;
align-items: center;
text-align: center;
text-transform: uppercase;
fill: #FFFFFF; }</style>
<a href="#">
<path opacity="0.5" d="M4.3071 33.4856C5.50854 32.6656 6.62989 32.0821 7.68716 31.5502C10.09 30.2132 12.2406 29.2677 14.3432 28.3665C16.4457 27.4653 18.4561 26.6971 20.4545 25.9436C24.4593 24.4663 28.3199 23.1071 32.2326 21.9104C40.042 19.5466 47.9756 17.8107 56.3416 17.9806C62.2207 18.6307 68.3881 18.2909 74.5555 17.8698C77.6312 17.6704 80.7389 17.4488 83.7305 17.301C86.7221 17.1533 89.5655 17.0351 92.3529 17.0277C89.0489 16.6288 85.7489 16.289 82.3408 16.0748C78.9327 15.8606 75.4125 15.7498 71.9283 15.7793C64.952 15.8384 57.9115 16.3555 50.883 17.1311C43.8546 17.9068 36.7701 18.9705 29.5855 20.2631C25.9811 20.9206 22.3768 21.6371 18.6083 22.5605C16.73 23.0258 14.8197 23.5429 12.8373 24.1634C11.8442 24.4884 10.8349 24.8282 9.78969 25.2345C8.74443 25.6408 7.67515 26.0766 6.54179 26.638C7.73732 23.3313 9.16776 20.3351 10.7949 17.7295C12.4109 15.1408 14.2972 13.19 16.3376 11.9973C21.4557 9.95113 26.2575 8.51808 30.9831 7.28448C35.7088 6.05088 40.3103 5.06843 44.8678 4.28542C45.004 6.02133 45.2683 9.41928 45.4005 11.1256C51.507 8.33321 57.7612 6.78502 64.0509 6.50887C70.1748 6.25141 76.3019 6.56205 82.4089 7.43962C85.3845 7.82373 88.2519 8.17829 91.1554 8.51069C94.0589 8.8431 96.9504 8.99084 99.8619 8.99823C105.788 9.10203 111.707 8.17456 117.539 6.22816C116.694 5.28265 117.207 3.87177 117.387 2.74897C117.551 1.76652 117.459 0.998297 115.969 0.976136C117.459 0.976136 117.551 1.76652 117.387 2.74897C111.5 3.08138 105.717 3.24388 99.978 3.25127C97.1106 3.25127 94.2511 3.21926 91.3997 3.15524C88.5403 3.08876 85.7049 2.99272 82.7934 2.87454C70.7549 2.46087 58.6564 2.57906 45.9051 4.12291C55.7689 2.42394 65.4085 1.41196 74.996 0.953977C77.3989 0.835787 79.7911 0.756989 82.1726 0.717593L89.0289 0.62156L102.549 0.39257C111.568 0.215286 120.615 0.0158425 129.782 0.00106884C138.949 -0.0137048 148.204 0.119258 157.707 0.739752L164.227 1.23466C165.805 2.64661 167.424 3.89689 169.077 4.97979C170.703 6.05088 172.301 6.88559 173.987 7.67598C175.673 8.46637 177.307 9.03516 179.005 9.53008C180.775 10.1063 182.545 10.5421 184.319 10.8819C183.158 15.0333 184.051 21.7775 183.518 26.7119C183.222 29.1495 182.629 31.1883 181.292 32.215C179.954 33.2418 177.892 33.2418 174.724 32.0008C174.656 33.7367 174.516 37.1716 174.447 38.9445C177.285 41.241 179.79 44.7354 181.76 49.1457C183.277 52.7534 184.147 57.1421 184.251 61.7033C184.338 63.696 184.22 65.701 183.903 67.6128C183.738 68.5257 183.533 69.4125 183.29 70.2646C183.072 71.1232 182.822 71.9526 182.541 72.7466C181.989 74.3046 181.305 75.6888 180.515 76.8463L180.218 77.26C180.111 77.4085 179.997 77.5395 179.878 77.6515C179.606 77.91 179.321 78.1612 179.021 78.3902C178.395 78.8678 177.75 79.2531 177.091 79.5425C175.421 80.1429 173.733 80.5622 172.037 80.7983C171.139 80.9238 170.27 80.9756 169.317 81.0568C168.364 81.1381 167.419 81.1602 166.45 81.1528C165.481 81.1454 164.508 81.1528 163.522 81.0642C162.537 80.9755 161.52 80.9682 160.487 80.8869C158.436 80.7318 156.378 80.4658 154.243 80.2516C145.773 79.2692 136.79 78.0873 128.18 79.6016C115.653 81.0273 103.098 82.645 90.5667 79.2101C88.4201 78.5674 86.2255 78.0356 84.0749 77.5924L82.473 77.2895L80.9151 77.0162C79.8779 76.8537 78.8326 76.7133 77.7874 76.5952C73.6023 76.1446 69.3773 76.0485 65.1482 76.115C56.702 76.2406 48.328 76.9276 40.2102 76.3662C37.2867 76.5434 33.5462 79.0033 30.3344 81.1307C28.9157 82.1283 27.466 82.9694 25.9932 83.6496C24.7396 84.1445 23.7144 84.174 22.9014 83.3541C21.9591 82.8215 21.1465 81.7012 20.6027 80.1851C20.029 78.5584 19.5966 76.7764 19.3211 74.9036C21.2394 73.5148 23.4301 72.2074 25.6688 71.0329C27.9074 69.8584 30.2302 68.8168 32.5811 67.8565C37.3255 65.944 42.1203 64.4844 46.9463 63.4835C58.981 61.9349 71.0708 62.7396 83.0136 65.8842C71.3156 61.3118 59.0529 60.9794 46.9463 63.4835C42.0805 64.0819 37.2387 65.02 32.4849 66.3422C30.1101 66.9997 27.7593 67.7679 25.4565 68.6395C23.1537 69.5112 20.911 70.5158 18.8406 71.6534C18.356 68.1668 17.9114 64.4955 16.6339 61.755C16.6339 61.755 15.9371 62.3016 15.1001 63.0403C14.277 63.7521 13.475 64.5436 12.6972 65.4115C11.7961 65.1677 10.9631 64.8649 10.1461 64.6063C9.33097 64.3111 8.50183 64.1676 7.67114 64.1779C7.24195 64.2041 6.81466 64.2955 6.39361 64.4512C5.9691 64.6285 5.54459 64.8722 5.1401 65.0938C4.33914 65.6626 3.57422 66.1206 2.87338 65.9286C2.17254 65.7365 1.51174 64.8649 1.03517 63.0625C0.923036 62.5823 0.814907 62.1834 0.722796 61.6885C0.627711 61.1682 0.555393 60.6346 0.506536 60.093C0.458478 59.4651 0.402409 58.9702 0.370371 58.394C0.337692 57.7927 0.325655 57.1883 0.334329 56.5842C0.377812 52.1311 0.823099 47.7224 1.65191 43.5391C2.52096 40.0525 3.36597 36.7284 4.3071 33.4856Z" fill="#DD6854"/>
<text x="90" y="30" text-anchor="middle" alignment-baseline="middle" class="wph-btn-ctg">TARGHE PER
<tspan x="90" y="60">PAGGETTO</tspan>
</text>
</a>
</svg>
I can't examinate the real rendering to understand where is the problem, looking at the code from chrome everythings seem to be correct.
Where am i doing the error?
It's a webkit bug! (not specific to apple safari)
Related to text-transform applied to svg <text><tspan> elements.
Quite baffling: this is a known issue since 2017!
webkit bugzilla report
Workaround: avoid text-transform
Just write your text in uppercase letters (you already did this) and
remove the text-transform:uppercase and everthing is fine.
Example snippet
<link href="https://fonts.googleapis.com/css2?family=Lato&family=Montserrat:wght#700" rel="stylesheet">
<svg width="185" height="84" viewBox="0 0 185 84" xmlns="http://www.w3.org/2000/svg">
<style>
.wph-btn-ctg {
font-family: Montserrat;
font-style: normal;
font-weight: bold;
font-size: 18px;
/* text-transform: uppercase; */
fill: #fff;
}
</style>
<a href="#">
<path opacity="0.5" d="M4.3 33.5c1.2-.8 2.3-1.4 3.4-1.9c2.4-1.3 4.6-2.3 6.7-3.2c2.1-.9 4.1-1.7 6.1-2.4c4-1.5 7.9-2.8 11.8-4c7.8-2.4 15.7-4.1 24.1-3.9c5.9 .7 12 .3 18.2-.1c3.1-.2 6.2-.4 9.2-.6c3-.1 5.8-.3 8.6-.3c-3.3-.4-6.6-.7-10-1c-3.4-.2-6.9-.3-10.4-.3c-7 .1-14 .6-21 1.4c-7 .8-14.1 1.8-21.3 3.1c-3.6 .7-7.2 1.4-11 2.3c-1.9 .5-3.8 1-5.8 1.6c-1 .3-2 .7-3 1.1c-1 .4-2.1 .8-3.2 1.4c1.2-3.3 2.6-6.3 4.3-8.9c1.6-2.6 3.5-4.5 5.5-5.7c5.1-2 9.9-3.5 14.6-4.7c4.7-1.2 9.3-2.2 13.9-3c0.1 1.7 .4 5.1 .5 6.8c6.1-2.8 12.4-4.3 18.7-4.6c6.1-.3 12.3 .1 18.4 .9c3 .4 5.8 .7 8.7 1.1c2.9 .3 5.8 .5 8.7 .5c5.9 .1 11.8-.8 17.7-2.8c-.8-.9-.3-2.4-.2-3.5c0.2-1 .1-1.8-1.4-1.8c1.5 0 1.6 .8 1.4 1.8c-5.9 .3-11.7 .5-17.4 .5c-2.9 0-5.7 0-8.6-.1c-2.9-.1-5.7-.2-8.6-.3c-12-.4-24.1-.3-36.9 1.2c9.9-1.7 19.5-2.7 29.1-3.2c2.4-.1 4.8-.2 7.2-.2l6.9-.1l13.5-.2c9-.2 18.1-.4 27.2-.4c9.2 0 18.4 .1 27.9 .7l6.5 .5c1.6 1.4 3.2 2.7 4.8 3.7c1.6 1.1 3.2 1.9 4.9 2.7c1.7 .8 3.3 1.4 5 1.9c1.8 .6 3.5 1 5.3 1.4c-1.2 4.2-.3 10.9-.8 15.8c-.3 2.4-.9 4.5-2.2 5.5c-1.3 1-3.4 1-6.6-.2c-.1 1.7-.2 5.2-.3 6.9c2.8 2.3 5.3 5.8 7.3 10.2c1.5 3.6 2.4 8 2.5 12.6c0.1 2 0 4-.3 5.9c-.2 .9-.4 1.8-.6 2.7c-.2 .9-.5 1.7-.7 2.5c-.6 1.6-1.2 2.9-2 4.1l-.3 .4c-.1 .1-.2 .3-.3 .4c-.3 .3-.6 .5-.9 .7c-.6 .5-1.3 .9-1.9 1.2c-1.7 .6-3.4 1-5.1 1.3c-.9 .1-1.8 .2-2.7 .3c-1 .1-1.9 .1-2.9 .1c-1 0-1.9 0-2.9-.1c-1-.1-2-.1-3-.2c-2.1-.2-4.1-.4-6.2-.6c-8.5-1-17.5-2.2-26.1-.6c-12.5 1.4-25.1 3-37.6-.4c-2.1-.6-4.3-1.2-6.5-1.6l-1.6-.3l-1.6-.3c-1-.2-2.1-.3-3.1-.4c-4.2-.5-8.4-.5-12.6-.5c-8.4 .1-16.8 .8-24.9 .3c-2.9 .2-6.7 2.6-9.9 4.8c-1.4 1-2.9 1.8-4.3 2.5c-1.3 .5-2.3 .5-3.1-.3c-.9-.5-1.8-1.7-2.3-3.2c-.6-1.6-1-3.4-1.3-5.3c1.9-1.4 4.1-2.7 6.3-3.9c2.2-1.2 4.6-2.2 6.9-3.2c4.7-1.9 9.5-3.4 14.4-4.4c12-1.5 24.1-.7 36.1 2.4c-11.7-4.6-24-4.9-36.1-2.4c-4.9 .6-9.7 1.5-14.5 2.9c-2.4 .7-4.7 1.4-7 2.3c-2.3 .9-4.5 1.9-6.6 3c-.5-3.5-.9-7.2-2.2-9.9c0 0-.7 .5-1.5 1.3c-.8 .7-1.6 1.5-2.4 2.4c-.9-.2-1.7-.5-2.6-.8c-.8-.3-1.6-.4-2.5-.4c-.4 0-.9 .1-1.3 .3c-.4 .2-.8 .4-1.3 .6c-.8 .6-1.6 1-2.3 .8c-.7-.2-1.4-1.1-1.8-2.9c-.1-.5-.2-.9-.3-1.4c-.1-.5-.2-1.1-.2-1.6c0-.6-.1-1.1-.1-1.7c0-.6 0-1.2 0-1.8c0-4.5 .5-8.9 1.3-13c0.9-3.5 1.7-6.8 2.7-10.1z" fill="#DD6854" />
<text x="90" y="30" text-anchor="middle" alignment-baseline="middle" class="wph-btn-ctg">
TARGHE PER
<tspan x="90" y="60">PAGGETTO</tspan>
</text>
</a>
</svg>
Debugging tip:
I could also reproduce this bug running a Linux based webkit browser in a virtual machine (Virtual Box, Linux Mint distribution, Epiphany and Midori).
Related
removing twitter icon on big Cartel footer nav
using Big Cartel Ranger theme. I would like to have the Mailing list at the top of my social links on the footer nav, preferably with an envelope icon. The reason it has the twitter icon is because it has been input via the basic Settings within big Cartel, and I have simply modified the title from Twitter to Mailing List via the layout code, see screengrab:
[]
Please be patient! I stumble my way through any code changes through trial and *mostly *error!
I have been in touch with Big Cartel support and they were asking me to remove the Layout code that relates to twitter (pasted below) and put a simple link in, which obviously didn't work. Below is the coding that relates to the twitter link on footernav.
{% if theme.twitter_url != blank or theme.facebook_url != blank or theme.instagram_url != blank or theme.tumblr_url != blank or theme.pinterest_url != blank %}
\<nav class="footernav"aria-label="Footer social media navigation"\>
\<div class="footer-nav-title"\>Social\</div\>
<ul class="social-icons">
{% if theme.twitter_url != blank %}
<li><a href="{{ theme.twitter_url }}" title="Mailing List">\<svg xmlns="http://www.w3.org/2000/svg
" width="24" height="24" viewBox="0 0 24 24"\>\<path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.61 1.798-1.574 2.165-2.724-.95.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.18 0-5.515 2.966-4.797 6.045C7.727 8.088 4.1 6.128 1.67 3.15.38 5.36 1.003 8.256 3.195 9.722c-.806-.026-1.566-.247-2.23-.616-.053 2.28 1.582 4.415 3.95 4.89-.693.188-1.452.232-2.224.084.626 1.957 2.444 3.38 4.6 3.42-2.07 1.623-4.678 2.348-7.29 2.04 2.18 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.72 13.995-14.646.962-.695 1.797-1.562 2.457-2.55z"/\>\</svg\>\<span\>Mailing List\</span\></a></li>
{% endif %}
As above, I simply amended the title to Mailing List from Twitter.
I also tried removing the w3.org link and inputting my image link, as follows: https://www.dropbox.com/s/rtxpa88q75wpmz2/Envelope.jpg?dl=0 but the icon remained.
I also removed everything from <svg to </svg> and that removed the icon.
I then tried to input my dropbox link and removing the <path to z"/> and it didn't change anything further.
I think it requires further change in CSS. There is one section that mention social icons and it appears all are 'locked in' within their w3.org link, in which case I don't think I can change it:
.footernav ul.social-icons {
list-style: none;
margin: 0;
padding: 0;
}
.footernav ul.social-icons li {
display: block;
}
.footernav ul.social-icons li a {
color: {{ theme.accent_text_color }};
display: block;
}
.footernav ul.social-icons li a span {
display: inline-block;
margin-left: 8px;
}
.footernav ul.social-icons li a svg {
\-webkit-transition: 0.1s ease-in-out;
transition: 0.1s ease-in-out;
display: inline-block;
fill: {{ theme.accent_text_color }};
height: 16px;
opacity: 0.6;
position: relative;
top: 3px;
width: 16px;
}
.footernav ul.social-icons li a:hover svg {
opacity: 1;
}
Any help appreciated, thanks in advance!
This one took me a while to figure out when I was editing my own icons, but it's easy to change! For this particular theme, there are two Twitter code bits you'll want to change under Layout. So to switch the icons associated with the Twitter link, you'll want to take out this SVG code on or around lines 147 and 252 (depending on if you've implemented more code) of your Layout: <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.61 1.798-1.574 2.165-2.724-.95.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.18 0-5.515 2.966-4.797 6.045C7.727 8.088 4.1 6.128 1.67 3.15.38 5.36 1.003 8.256 3.195 9.722c-.806-.026-1.566-.247-2.23-.616-.053 2.28 1.582 4.415 3.95 4.89-.693.188-1.452.232-2.224.084.626 1.957 2.444 3.38 4.6 3.42-2.07 1.623-4.678 2.348-7.29 2.04 2.18 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.72 13.995-14.646.962-.695 1.797-1.562 2.457-2.55z"/></svg> Be sure to leave the < a > tags around them! Now, you'll want to replace those SVG code bits with the following in both places, to which I used a free envelope icon from Font Awesome: <svg height="24" width="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.1 by #fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"/></svg> This should get you the results you're wanting with that envelope on both desktop and mobile. :) Let me know if this works for you!
How to only present output in Google Colaboratory?
I have the following svg that presents a logo but I want to generate a .pdf where it's only present the logo and not the code of this specific cell, how can I do that? The svg: %%html <svg width="529" height="265" xmlns="http://www.w3.org/2000/svg" xmlns:undefined="http://www.inkscape.org/namespaces/inkscape"> <g> <title>Layer 1</title> <metadata id="svg_14">image/svg+xml</metadata> <g> <metadata id="svg_9">image/svg+xml</metadata> <g transform="matrix(1.33333 0 0 -1.33333 0 468.32)" id="svg_2"> <g transform="translate(0 -76.2875) scale(0.1 0.1)" id="svg_3"> <!-- uminho symbol + red background --> <path fill-rule="nonzero" fill="#a42a3c" id="svg_7" d="m0,2291.02528l1984.25,0l0,1984.25l-1984.25,0l0,-1984.25"/> <!-- uminho symbol --> <path fill-rule="nonzero" fill="#ffffff" id="svg_6" d="m1502.43,3514.55528l-378.95,-220.62c-68.8,-39.71 -129.285,64.76 -60.48,104.49l379,220.52c68.88,39.76 129.16,-64.71 60.43,-104.39m-1039.617,-1.46l383.14,-217.25c68.711,-39.66 129.059,64.89 60.172,104.67l-383.203,217.16c-68.77,39.7 -128.938,-64.84 -60.109,-104.58m459.449,-797.92l-0.047,440.75c0,33.37 27.109,60.33 60.379,60.33c33.336,0 60.336,-27.01 60.336,-60.34l-0.05,-440.74c0,-33.28 -26.92,-60.34 -60.286,-60.33c-33.321,0 -60.332,27.01 -60.332,60.33m-379.258,235.44l184.039,104.36c68.863,39.77 8.461,144.3 -60.289,104.6l-183.996,-104.46c-68.774,-39.72 -8.574,-144.24 60.246,-104.5m918.046,-3.45l-179.19,108.08c-68.78,39.7 -8.28,144.18 60.55,104.43l179.14,-108.16c68.72,-39.67 8.4,-144.12 -60.5,-104.35m-478.495,964.28c-33.371,0 -60.293,-27.05 -60.293,-60.33l-0.047,-211.59c0,-33.32 27.012,-60.34 60.34,-60.34c33.265,0 60.375,26.98 60.375,60.34l-0.05,211.59c0,33.32 -27,60.33 -60.325,60.33"/> <!-- ec symbol + blue background --> <path fill-rule="nonzero" fill="#8cbce8" id="svg_5" d="m1984.25,2291.02528l1984.26,0l0,1984.25l-1984.26,0l0,-1984.25"/> <!-- ec symbol --> <path fill-rule="nonzero" fill="#ffffff" id="svg_4" d="m3540.85,3037.67528l-100.97,183.1c-39.72,68.79 -144.26,8.6 -104.58,-60.12l101.07,-183.06c39.74,-68.84 144.12,-8.57 104.48,60.08m-17.75,558.93c0,33.34 -27.02,60.24 -60.29,60.24l-211.41,0.05c-33.3,0 -60.28,-27 -60.28,-60.29c0,-33.25 26.94,-60.34 60.28,-60.34l211.41,0.05c33.31,0 60.29,26.99 60.29,60.29m-362.52,-738.96c16.65,28.85 6.78,65.71 -22.07,82.36c-28.87,16.67 -65.68,6.72 -82.31,-22.09l-105.75,-183.06c-16.65,-28.84 -6.77,-65.71 22.07,-82.36c28.79,-16.62 65.73,-6.83 82.4,22.04l105.66,183.11zm-150.24,974.55c16.66,28.85 6.77,65.71 -22.06,82.36c-28.88,16.67 -65.69,6.72 -82.32,-22.09l-105.75,-183.06c-16.65,-28.84 -6.76,-65.71 22.07,-82.36c28.8,-16.62 65.73,-6.83 82.4,22.05l105.66,183.1zm-241.49,-862.5c0,33.25 -26.96,60.34 -60.29,60.34l-211.42,-0.05c-33.29,0 -60.29,-27 -60.29,-60.29c-0.01,-33.35 27.04,-60.24 60.29,-60.24l211.4,-0.05c33.31,0 60.31,26.99 60.31,60.29m-146.85,428.75l-105.75,183.06c-16.63,28.81 -53.44,38.76 -82.31,22.09c-28.84,-16.65 -38.72,-53.51 -22.07,-82.36l105.66,-183.1c16.67,-28.88 53.61,-38.67 82.4,-22.05c28.83,16.65 38.72,53.52 22.07,82.36"/> </g> </g> </g> </g> </svg> The Output is this one: Thanks in advance. R.: One of the options I have is convert the svg to a png and put it there but I would like to not do that extra step.
By far the simplest way to convert SVG to PDF is via HTML, so I suggest you add enough HTML wrapping to control the output. Here we can see the normal HTML placement would include lots of other page data which of course you may add as you wish. One gotcha is of course units so you may need to introduce scaling factors but that is way beyond this simple demonstration of how to show and convert SVG-to-PDF
The first step is wrapping the SVG with the HTML (and this is overkill) but I simply used your Minimal !! SVG for cut and paste in a template as proof of concept.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- saved from url=https://stackoverflow.com/questions/70731953 -->
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>None</title>
<meta name="GENERATOR" content="KJs Template Builder V 2022-01">
<meta http-equiv="Content-Style-Type" content="text/css"><style>
#media print {
#page {
/* For different margins – use the standard CSS margin property: north, east, south, west, here it is one value */
margin: 0;
/* Browser default, customisable by the user if using the print dialogue. */
size: auto;
/* Default, In my instance of Edge, this is a vertical or horizontal A4 format, but you might find something different depending on your locale. */
size: portrait;
/* Different width and height. here using stated width="529" height="265" can be px or pt or cm. For square, just use one value or use name like A6 landscape; note this is over-riding both above size: */
size: 529px 265px;
}
body { margin: 0; }
}
</style>
</head><body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<svg width="529" height="265" xmlns="http://www.w3.org/2000/svg" xmlns:undefined="http://www.inkscape.org/namespaces/inkscape">
<g>
<title>Layer 1</title>
<metadata id="svg_14">image/svg+xml</metadata>
<g>
<metadata id="svg_9">image/svg+xml</metadata>
<g transform="matrix(1.33333 0 0 -1.33333 0 468.32)" id="svg_2">
<g transform="translate(0 -76.2875) scale(0.1 0.1)" id="svg_3">
<!-- uminho symbol + red background -->
<path fill-rule="nonzero" fill="#a42a3c" id="svg_7" d="m0,2291.02528l1984.25,0l0,1984.25l-1984.25,0l0,-1984.25"/>
<!-- uminho symbol -->
<path fill-rule="nonzero" fill="#ffffff" id="svg_6" d="m1502.43,3514.55528l-378.95,-220.62c-68.8,-39.71 -129.285,64.76 -60.48,104.49l379,220.52c68.88,39.76 129.16,-64.71 60.43,-104.39m-1039.617,-1.46l383.14,-217.25c68.711,-39.66 129.059,64.89 60.172,104.67l-383.203,217.16c-68.77,39.7 -128.938,-64.84 -60.109,-104.58m459.449,-797.92l-0.047,440.75c0,33.37 27.109,60.33 60.379,60.33c33.336,0 60.336,-27.01 60.336,-60.34l-0.05,-440.74c0,-33.28 -26.92,-60.34 -60.286,-60.33c-33.321,0 -60.332,27.01 -60.332,60.33m-379.258,235.44l184.039,104.36c68.863,39.77 8.461,144.3 -60.289,104.6l-183.996,-104.46c-68.774,-39.72 -8.574,-144.24 60.246,-104.5m918.046,-3.45l-179.19,108.08c-68.78,39.7 -8.28,144.18 60.55,104.43l179.14,-108.16c68.72,-39.67 8.4,-144.12 -60.5,-104.35m-478.495,964.28c-33.371,0 -60.293,-27.05 -60.293,-60.33l-0.047,-211.59c0,-33.32 27.012,-60.34 60.34,-60.34c33.265,0 60.375,26.98 60.375,60.34l-0.05,211.59c0,33.32 -27,60.33 -60.325,60.33"/>
<!-- ec symbol + blue background -->
<path fill-rule="nonzero" fill="#8cbce8" id="svg_5" d="m1984.25,2291.02528l1984.26,0l0,1984.25l-1984.26,0l0,-1984.25"/>
<!-- ec symbol -->
<path fill-rule="nonzero" fill="#ffffff" id="svg_4" d="m3540.85,3037.67528l-100.97,183.1c-39.72,68.79 -144.26,8.6 -104.58,-60.12l101.07,-183.06c39.74,-68.84 144.12,-8.57 104.48,60.08m-17.75,558.93c0,33.34 -27.02,60.24 -60.29,60.24l-211.41,0.05c-33.3,0 -60.28,-27 -60.28,-60.29c0,-33.25 26.94,-60.34 60.28,-60.34l211.41,0.05c33.31,0 60.29,26.99 60.29,60.29m-362.52,-738.96c16.65,28.85 6.78,65.71 -22.07,82.36c-28.87,16.67 -65.68,6.72 -82.31,-22.09l-105.75,-183.06c-16.65,-28.84 -6.77,-65.71 22.07,-82.36c28.79,-16.62 65.73,-6.83 82.4,22.04l105.66,183.11zm-150.24,974.55c16.66,28.85 6.77,65.71 -22.06,82.36c-28.88,16.67 -65.69,6.72 -82.32,-22.09l-105.75,-183.06c-16.65,-28.84 -6.76,-65.71 22.07,-82.36c28.8,-16.62 65.73,-6.83 82.4,22.05l105.66,183.1zm-241.49,-862.5c0,33.25 -26.96,60.34 -60.29,60.34l-211.42,-0.05c-33.29,0 -60.29,-27 -60.29,-60.29c-0.01,-33.35 27.04,-60.24 60.29,-60.24l211.4,-0.05c33.31,0 60.31,26.99 60.31,60.29m-146.85,428.75l-105.75,183.06c-16.63,28.81 -53.44,38.76 -82.31,22.09c-28.84,-16.65 -38.72,-53.51 -22.07,-82.36l105.66,-183.1c16.67,-28.88 53.61,-38.67 82.4,-22.05c28.83,16.65 38.72,53.52 22.07,82.36"/>
</g>
</g>
</g>
</g>
</svg>
</body></html>
Now we need a means to send the content to a PDF writer and here I use Edge but you can of course use Chrome. On Windows you may need to run that as Admin, it should only take a few seconds even on a slow 32bit win 7 device as I am currently on.
Note older windows may need --disable-gpu but should not now be needed since 7 is expired.
"C:\Program Files\Microsoft\Edge\Application\msedge.exe" --headless --run-all-compositor-stages-before-draw --print-to-pdf="%USERPROFILE%\desktop\OUTlogo.pdf" --print-to-pdf-no-header "%USERPROFILE%\Desktop\Logo.html"
Svg inside h1 tag
I have a Gatsby project, where where I would like to use an svg as my main heading. import Header from "../images/header.svg" return ( <h1> <Header/> </h1> ) Thers is no text in the svg (the text is made purely using rects and paths), so what do I do in terms of accessibility and SEO optimization?
Two ways to address this, visually hidden text or by adding a <title> to your SVG.
Do not use aria-label as support is not great (you will see people recommending that for SVGs, aria-label does not tend to work well on static / non-interactive elements).
Visually Hidden text (screen reader only text)
Visually hidden text is not visible on the screen but will still be read by a screen reader.
Please use the CSS class below to visually hide text, it has better compatibility and is future proofed compared to most current "screen reader only" classes as explained in this answer I gave
.visually-hidden {
border: 0;
padding: 0;
margin: 0;
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}
<h1>
<span class="visually-hidden">Welcome To Our Site</span>
<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path fill="#666" d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z">
</path>
</svg>
</h1>
important: notice how I add focusable="false" as well as aria-hidden="true" to the SVG, this is to fix a bug with Internet Explorer where SVGs are focusable and to hide the SVG from screen readers. I used a youtube icon to represent your text as that was the closest SVG I had to hand!
Add a <title> element to your SVG.
The <title> element is effectively the same as alt on a normal image. Using this gives the screen reader something to announce.
Obviously you would then remove the aria-hidden="true" from it so it can be read by a screen reader!
Update after comments to include best practices for <title> and or <desc>
Thanks to the comments I realised this answer was lacking some key information on how to correctly use a <title>.
In this answer I gave I referenced a series of tests by deque which show that the most reliable method for labelling an SVG for screen readers using WAI-ARIA was to use aria-labelledby and point that to the <title> (and <desc> if you have both).
So a rough idea of how to do this is as follows:
<h1>
<svg aria-labelledby="welcome-title" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<title id="welcome-title">Welcome To Our Site</title>
<path fill="#666" d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z">
</path>
</svg>
</h1>
Which is better?
Go for visually hidden text.
It works all the way back to IE6 which predates SVG!
It also works in a text only browser (one that does not understand CSS) as it will still be displayed. It is an edge case but still a win for visually hidden text!
Target symbol by ID from external SVG file
The goal is to create multiple buttons (in my case two) with different symbols based on one SVG.
I have an SVG file containing 3 groups with vector shapes.
One group is background that needs to be filled by particular color (hover).
Two other groups contain different symbols (ellipse,square) and named with ZZZ at the end.
One button should show ellipse, another button-square.
I've set these two groups in SVG to "display:none" unless they are targeted.Content of the test.svg as follow:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22"><defs><style>
.cls-1 {
fill: #340000;
}
.cls-2 {
fill: none;
stroke: #fff;
stroke-miterlimit: 10;
}
[id$=zzz] { display: none; }
g:target { display: block; }
</style></defs><g id="Layer_2" data-name="Layer 2"><g id="test"><g id="group_background" data-name="group background"><rect id="shape_background" data-name="shape background" class="cls-1" width="22" height="22"/></g><g id="square_zzz" data-name="square zzz"><rect id="shape_square" data-name="shape square" class="cls-2" x="4.731" y="4.237" width="13.119"height="13.119"/>
</g>
<g id="ellipse_zzz" data-name="ellipse zzz">
<circle id="shape_ellipse" data-name="shape ellipse" class="cls-2" cx="11.29" cy="10.797" r="6.693"/>
</g></g></g></svg>
In my CSS I'm trying to show different shapes on the buttons:
.button1{background-image:url(test.svg#square_zzz);}.button2{background-image:url(test.svg#ellipse_zzz);}
However nothing shows up.
Question dismissed. Targeting ID works fine - ( Dreamweaver Live view issue). Still trying to figure out how to change color for background and shape on targeting group with CSS and implement cloneNode() to duplicate button without creating multiple SVG instances for each button.
SVG is invisible but exists in DOM
I have a bunch of line elements created with D3 but the strange thing is that they're appearing in the DOM and when I mouseover them I see it being highlighted but there isn't anything there, everything is just blank. The code somewhat looks like this and the CSS has some weird webkit-transform-origin stuff. Does anyone know what is wrong? (screenshot of issue: http://imgur.com/HRE01Gd) <div> <svg width="1000" height="700"> <line x1="420" y1="470" x2="394.9078930250818" y2="369.0723716341295" id="id-1" style="stroke- width: 10px; color: red;"></line> </svg> </div> -webkit-transform-origin-x: 0px; -webkit-transform-origin-y: 0px; -webkit-transform-origin-z: initial;
color doesn't do anything. Set stroke instead. At the moment, all of your lines are getting rendered with no stroke at all, which makes them invisible.
You need to change color to stroke. For instance: <line x1="420" y1="470" x2="394.9078930250818" y2="369.0723716341295" id="id-1" style="stroke-width: 10px; stroke: red;"></line>
I had same problem. Tried to set stroke-width - did not help. Fixed it with correct x position of the element.