Adding stroke increases the stroke-width - html
I have been given this svg file to add to a project, being new to SVG's I am sure I have missed something.
It seems to be fine until I add the stroke to change the colour, as soon as this is applied the stroke-width seems to increase.
I am not sure if this is related to the decimal places which I know can cause blurry lines but I don't think that is the issue here.
I have tried adding stroke to the g tag and also tried it on the path tag.
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
id="dual-antenna"
version="1.1"
viewBox="0 0 8.4666664 8.4666664"
height="32"
width="32">
<g transform="translate(0,-288.53333)">
<path d="m 3.2397571,288.88475 c -0.7236992,0.002 -1.4512336,0.19341 -2.0203358,0.6029 C 0.65031914,289.89714 0.25,290.54944 0.25,291.36624 v 3.02026 a 0.33705214,0.33705214 0 0 0 0.33717329,0.33564 H 2.2278512 v 1.64068 A 0.33705214,0.33705214 0 0 0 2.5654105,296.7 h 5.3043953 a 0.33705214,0.33705214 0 0 0 0.337173,-0.33718 v -3.01871 c 0,-0.82167 -0.3993311,-1.47682 -0.9690349,-1.88596 -0.3093926,-0.22218 -0.6663766,-0.37745 -1.04319,-0.47465 -0.1028153,-0.6423 -0.4569433,-1.16012 -0.934661,-1.50319 -0.5697045,-0.40914 -1.2966364,-0.59708 -2.0203358,-0.59556 z m 0.00117,0.67435 c 0.6025681,-0.002 1.2013914,0.1633 1.6263878,0.46849 0.2983405,0.21425 0.5146716,0.48683 0.6179578,0.84197 -0.089523,-0.006 -0.1795069,-0.008 -0.269198,-0.008 -0.7236992,0.002 -1.4496886,0.1934 -2.0187908,0.60289 -0.5691021,0.40952 -0.9694213,1.06335 -0.9694213,1.88017 v 0.70523 h -1.303508 v -2.6831 c 0,-0.60759 0.2634246,-1.02507 0.6890229,-1.33132 0.4255985,-0.30624 1.0249784,-0.47455 1.6275463,-0.47583 z m 1.9766926,1.97631 c 0.6025679,-0.002 1.20255,0.16483 1.6275463,0.47002 0.4249964,0.30521 0.6874776,0.72457 0.6874776,1.33868 v 2.68153 H 2.902584 v -2.68153 c 0,-0.60762 0.2634244,-1.02664 0.6890228,-1.33289 0.4255983,-0.30623 1.0234332,-0.47452 1.6260013,-0.47581 z" />
</g>
</svg>
Yes it increases because the path is a shape, to change the color you have to use the "fill" attribute. Stroke adds a stroke around the shape and therefore enlarges the shape. Look at the example :
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
id="dual-antenna"
version="1.1"
viewBox="0 0 8.4666664 8.4666664"
height="32"
width="32">
<g transform="translate(0,-288.53333)" stroke="#f0f" stroke-width="3%">
<path d="m 3.2397571,288.88475 c -0.7236992,0.002 -1.4512336,0.19341 -2.0203358,0.6029 C 0.65031914,289.89714 0.25,290.54944 0.25,291.36624 v 3.02026 a 0.33705214,0.33705214 0 0 0 0.33717329,0.33564 H 2.2278512 v 1.64068 A 0.33705214,0.33705214 0 0 0 2.5654105,296.7 h 5.3043953 a 0.33705214,0.33705214 0 0 0 0.337173,-0.33718 v -3.01871 c 0,-0.82167 -0.3993311,-1.47682 -0.9690349,-1.88596 -0.3093926,-0.22218 -0.6663766,-0.37745 -1.04319,-0.47465 -0.1028153,-0.6423 -0.4569433,-1.16012 -0.934661,-1.50319 -0.5697045,-0.40914 -1.2966364,-0.59708 -2.0203358,-0.59556 z m 0.00117,0.67435 c 0.6025681,-0.002 1.2013914,0.1633 1.6263878,0.46849 0.2983405,0.21425 0.5146716,0.48683 0.6179578,0.84197 -0.089523,-0.006 -0.1795069,-0.008 -0.269198,-0.008 -0.7236992,0.002 -1.4496886,0.1934 -2.0187908,0.60289 -0.5691021,0.40952 -0.9694213,1.06335 -0.9694213,1.88017 v 0.70523 h -1.303508 v -2.6831 c 0,-0.60759 0.2634246,-1.02507 0.6890229,-1.33132 0.4255985,-0.30624 1.0249784,-0.47455 1.6275463,-0.47583 z m 1.9766926,1.97631 c 0.6025679,-0.002 1.20255,0.16483 1.6275463,0.47002 0.4249964,0.30521 0.6874776,0.72457 0.6874776,1.33868 v 2.68153 H 2.902584 v -2.68153 c 0,-0.60762 0.2634244,-1.02664 0.6890228,-1.33289 0.4255983,-0.30623 1.0234332,-0.47452 1.6260013,-0.47581 z" />
</g>
</svg>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
id="dual-antenna"
version="1.1"
viewBox="0 0 8.4666664 8.4666664"
height="32"
width="32">
<g transform="translate(0,-288.53333)" fill="#f0f">
<path d="m 3.2397571,288.88475 c -0.7236992,0.002 -1.4512336,0.19341 -2.0203358,0.6029 C 0.65031914,289.89714 0.25,290.54944 0.25,291.36624 v 3.02026 a 0.33705214,0.33705214 0 0 0 0.33717329,0.33564 H 2.2278512 v 1.64068 A 0.33705214,0.33705214 0 0 0 2.5654105,296.7 h 5.3043953 a 0.33705214,0.33705214 0 0 0 0.337173,-0.33718 v -3.01871 c 0,-0.82167 -0.3993311,-1.47682 -0.9690349,-1.88596 -0.3093926,-0.22218 -0.6663766,-0.37745 -1.04319,-0.47465 -0.1028153,-0.6423 -0.4569433,-1.16012 -0.934661,-1.50319 -0.5697045,-0.40914 -1.2966364,-0.59708 -2.0203358,-0.59556 z m 0.00117,0.67435 c 0.6025681,-0.002 1.2013914,0.1633 1.6263878,0.46849 0.2983405,0.21425 0.5146716,0.48683 0.6179578,0.84197 -0.089523,-0.006 -0.1795069,-0.008 -0.269198,-0.008 -0.7236992,0.002 -1.4496886,0.1934 -2.0187908,0.60289 -0.5691021,0.40952 -0.9694213,1.06335 -0.9694213,1.88017 v 0.70523 h -1.303508 v -2.6831 c 0,-0.60759 0.2634246,-1.02507 0.6890229,-1.33132 0.4255985,-0.30624 1.0249784,-0.47455 1.6275463,-0.47583 z m 1.9766926,1.97631 c 0.6025679,-0.002 1.20255,0.16483 1.6275463,0.47002 0.4249964,0.30521 0.6874776,0.72457 0.6874776,1.33868 v 2.68153 H 2.902584 v -2.68153 c 0,-0.60762 0.2634244,-1.02664 0.6890228,-1.33289 0.4255983,-0.30623 1.0234332,-0.47452 1.6260013,-0.47581 z" />
</g>
</svg>
Related
SVG two paths in a single one axis
I have been new to SVG and trying to figure out how can I make different paths in an SVG in a single axis/single line. Now what I want is that these words align to one single line like UNFO (Their Y-axis should be same) Now this is the code to generate these words. HTML Code <svg style="background:black;" viewBox="0 0 1900 1400"> <path stroke="white" fill="none" stroke-width="1" id="Color_Fill_2" data-name="Color Fill 2" class="cls-2" d="M214.066,479.666q-14.21,29.444-20.508,53.613-5.128,19.484-5.127,29.3a11.726,11.726,0,0,0,2.344,7.324,9.709,9.709,0,0,0,7.764,3.955,4.257,4.257,0,0,0,4.248-2.636q0.73-1.758,1.025-9.522,0.879-21.677,19.776-66.5,19.04-45.263,52.441-95.361,6.591-9.812,6.592-13.476a6.047,6.047,0,0,0-1.9-4.395,6.408,6.408,0,0,0-4.834-2.2,10.365,10.365,0,0,0-7.177,2.783,92.63,92.63,0,0,0-8.35,8.643q-19.335,21.972-34.717,42.187-61.083,79.98-88.037,110.889-10.693,12.161-16.406,12.158a5.448,5.448,0,0,1-4.834-2.783,10.56,10.56,0,0,1-1.318-5.274q0-6.883,3.516-18.6a226.082,226.082,0,0,1,13.769-35.3q20.655-42.479,47.9-74.414,21.238-24.9,22.852-26.513,7.03-7.032,7.031-11.28a6.794,6.794,0,0,0-2.637-5.42,5.925,5.925,0,0,0-3.808-1.611q-6.009,0-21.24,17.578-36.771,42.334-59.619,87.012Q99.368,526.1,99.369,552.762a28.884,28.884,0,0,0,3.369,14.355q4.978,8.645,12.891,8.643,11.569,0,28.711-18.018a431.678,431.678,0,0,0,32.666-39.7q41.748-56.541,54.931-72.07-16.994,32.081-17.871,33.691h0Z"/> <path stroke="white" fill="none" stroke-width="1" id="Color_Fill_2" data-name="Color Fill 2" class="cls-2" d="M508.564,250.1q4.248-6,4.248-9.228a6.46,6.46,0,0,0-2.05-4.688,5.189,5.189,0,0,0-3.662-1.757q-3.956,0-9.522,8.056-5.568,8.205-15.234,26.367Q464.326,302.4,464.326,310.3a7.142,7.142,0,0,0,2.051,5.274,5.323,5.323,0,0,0,4.1,1.758q4.982,0,9.375-7.764,17.137-32.372,37.06-45.117-14.942,24.026-14.941,43.8,0,10.254,3.955,17.431,4.1,7.615,10.107,7.617a5.993,5.993,0,0,0,4.541-2.05,4.615,4.615,0,0,0,1.758-3.37q0-1.9-2.051-5.273a29.441,29.441,0,0,1-4.394-15.381q0-24.9,27.978-57.568,5.126-6,5.127-10.4,0-6.3-5.713-6.3-10.4,0-41.015,29.883-1.758,1.757-3.663,3.515a156.849,156.849,0,0,1,9.961-16.26h0Z"/> <path stroke="white" fill="none" stroke-width="1" id="Color_Fill_2" data-name="Color Fill 2" class="cls-2" d="M77.51,958.75q0,4.395,3.955,4.395a9.069,9.069,0,0,0,2.2-.293Q81.317,969,78.828,974.424q-9.668,21.828-11.719,27.1-16.4,43.515-16.406,65.19,0,10.11,3.662,15.97,4.542,7.02,11.865,7.03,9.668,0,18.9-9.52,8.641-8.79,17.871-25.79,21.385-39.84,21.387-75.728,0-13.916-4.981-23.438-3.663-6.735-12.451-10.839,20.506-13.329,35.156-13.33a11.828,11.828,0,0,1,5.274,1.025q7.323,4.1,9.814,4.1a6.938,6.938,0,0,0,5.713-2.783,6.416,6.416,0,0,0,1.611-4.248q0-4.539-4.541-8.056a17.77,17.77,0,0,0-11.132-3.37q-9.23,0-32.666,8.936,26.218-51.559,58.593-88.476,5.126-6.006,5.127-9.229a4.618,4.618,0,0,0-2.051-3.955,4.491,4.491,0,0,0-3.076-1.172q-4.689,0-11.279,6.592-9.524,9.377-24.023,29.883-21.39,30.323-43.8,78.662Q77.509,950.987,77.51,958.75h0Zm30.615,4.688q4.246,5.568,4.248,16.552,0,28.274-16.7,62.26-14.8,30.465-23.877,30.46c-1.854,0-3.465-.97-4.834-2.93a12.086,12.086,0,0,1-1.9-6.73q0-19.485,13.916-54.79,13.475-34.566,21.679-50.1,5.858,3.077,7.471,5.274h0Z"/> <path stroke="white" fill="none" stroke-width="1" id="Color_Fill_2" data-name="Color Fill 2" class="cls-2" d="M824.762,560.3q-16.26,11.282-28.272,31.64Q783.6,613.912,783.6,632.662a20.468,20.468,0,0,0,2.05,9.521q3.956,7.911,12.452,7.91,18.309,0,37.939-32.373,18.018-29.882,18.017-49.365,0-14.646-12.011-14.648-7.767,0-17.285,6.592h0Zm0,53.613a45.37,45.37,0,0,1-5.713,9.082q-8.058,10.546-15.088,10.547a5.744,5.744,0,0,1-4.834-2.637,7.524,7.524,0,0,1-1.318-4.395q0-9.372,7.177-23.583a92.43,92.43,0,0,1,17.871-24.17q9.081-9.081,13.77-9.082a3.881,3.881,0,0,1,3.662,2.2,4.408,4.408,0,0,1,.732,2.344q0,9.084-13.183,23.877-4.69,5.272-4.688,6.445,0,1.614,3.662,4.541,0.145,0.147-2.05,4.834h0Z"/> </svg> Can anyone tell me how to align each path?
Your first move command in each path specifies the starting y position. Each path shows a different y position. All four paths should probably have their first y value be the same say 150; however, some of the commands that follow are using absolute positioning. Changing the Y value will distort your shapes. If you are using an editor see if you can change it to use relative values rather than absolute. You can see them in the paths. Where ever there is an uppercase letter it is a absolute position. If it's a lower case letter then it is a relative position. The first M command in each svg is probably fine but the remaining commands in your SVG should probably be relative. That way you could just change the y value in each to be the same. You could change the first svg paths first M command to read something like M214.066,250 the second path to read M508.564,250 and the last two to use 250 as the second parameter also. I used Inkscape and imported your path using its XML editor. Once I created a new svg:path element and pasted your path data in I just moved it a little and Inkscape automatically converted the data to be relative. Then I just copied it back out and made adjustments to the first M command's x an y parameters for each svg path. <svg style="background:black;" viewBox="0 0 1900 1400"> <path stroke="white" fill="none" stroke-width="1" id="Color_Fill_2" data-name="Color Fill 2" class="cls-2" d="M214.066,150 q -14.21,29.444 -20.508,53.613 -5.128,19.484 -5.127,29.3 a 11.726,11.726 0 0 0 2.344,7.324 9.709,9.709 0 0 0 7.764,3.955 4.257,4.257 0 0 0 4.248,-2.636 q 0.73,-1.758 1.025,-9.522 0.879,-21.677 19.776,-66.5 19.04,-45.263006 52.441,-95.361006 6.591,-9.812 6.592,-13.476 a 6.047,6.047 0 0 0 -1.9,-4.395 6.408,6.408 0 0 0 -4.834,-2.2 10.365,10.365 0 0 0 -7.177,2.783 92.63,92.63 0 0 0 -8.35,8.643 q -19.335,21.972 -34.717,42.187 -61.082996,79.980006 -88.036996,110.889006 -10.693,12.161 -16.406,12.158 a 5.448,5.448 0 0 1 -4.834,-2.783 10.56,10.56 0 0 1 -1.318,-5.274 q 0,-6.883 3.516,-18.6 a 226.082,226.082 0 0 1 13.769,-35.3 q 20.655,-42.479006 47.9,-74.414006 21.237996,-24.9 22.851996,-26.513 7.03,-7.032 7.031,-11.28 a 6.794,6.794 0 0 0 -2.637,-5.42 5.925,5.925 0 0 0 -3.808,-1.611 q -6.009,0 -21.239996,17.578 -36.771,42.334 -59.619,87.012006 -23.444001,46.277 -23.443001,72.939 a 28.884,28.884 0 0 0 3.369001,14.355 q 4.978,8.645 12.891,8.643 11.569,0 28.711,-18.018 a 431.678,431.678 0 0 0 32.666,-39.7 q 41.747996,-56.541 54.930996,-72.070006 -16.994,32.081006 -17.871,33.691006 v 0 z"/> <path stroke="white" fill="none" stroke-width="1" id="Color_Fill_2" data-name="Color Fill 2" class="cls-2" d="M300,150 q 4.248,-6 4.248,-9.228 a 6.46,6.46 0 0 0 -2.05,-4.688 5.189,5.189 0 0 0 -3.662,-1.757 q -3.956,0 -9.522,8.056 -5.568,8.205 -15.234,26.367 -18.018,33.55 -18.018,41.45 a 7.142,7.142 0 0 0 2.051,5.274 5.323,5.323 0 0 0 4.1,1.758 q 4.982,0 9.375,-7.764 17.137,-32.372 37.06,-45.117 -14.942,24.026 -14.941,43.8 0,10.254 3.955,17.431 4.1,7.615 10.107,7.617 a 5.993,5.993 0 0 0 4.541,-2.05 4.615,4.615 0 0 0 1.758,-3.37 q 0,-1.9 -2.051,-5.273 a 29.441,29.441 0 0 1 -4.394,-15.381 q 0,-24.9 27.978,-57.568 5.126,-6 5.127,-10.4 0,-6.3 -5.713,-6.3 -10.4,0 -41.015,29.883 -1.758,1.757 -3.663,3.515 a 156.849,156.849 0 0 1 9.961,-16.26 v 0 z"/> <path stroke="white" fill="none" stroke-width="1" id="Color_Fill_2" data-name="Color Fill 2" class="cls-2" d="M360,150 q 0,4.395 3.955,4.395 a 9.069,9.069 0 0 0 2.2,-0.293 q -2.348,6.148 -4.837,11.572 -9.668,21.828 -11.719,27.1 -16.4,43.515 -16.406,65.18998 0,10.11 3.662,15.97 4.542,7.02 11.865,7.03 9.668,0 18.9,-9.52 8.641004,-8.79 17.871004,-25.78998 21.385,-39.84 21.387,-75.728 0,-13.916 -4.981,-23.438 -3.663,-6.735 -12.451,-10.839 20.506,-13.329 35.156,-13.33 a 11.828,11.828 0 0 1 5.274,1.025 q 7.323,4.1 9.814,4.1 a 6.938,6.938 0 0 0 5.713,-2.783 6.416,6.416 0 0 0 1.611,-4.248 q 0,-4.539 -4.541,-8.056 a 17.77,17.77 0 0 0 -11.132,-3.37 q -9.23,0 -32.666,8.936 26.218,-51.559 58.593,-88.476 5.126,-6.006 5.127,-9.229 a 4.618,4.618 0 0 0 -2.051,-3.955 4.491,4.491 0 0 0 -3.076,-1.172 q -4.689,0 -11.279,6.592 -9.524,9.377 -24.023,29.883 -21.39,30.323 -43.8,78.662 -18.167004,12.009 -18.166004,19.772 z m 30.615004,4.688 q 4.246,5.568 4.248,16.552 0,28.274 -16.7,62.26 -14.800004,30.46498 -23.877004,30.45998 c -1.854,0 -3.465,-0.97 -4.834,-2.93 a 12.086,12.086 0 0 1 -1.9,-6.73 q 0,-19.48498 13.916,-54.78998 13.475004,-34.566 21.679004,-50.1 5.858,3.077 7.471,5.274 v 0 z"/> <path stroke="white" fill="none" stroke-width="1" id="Color_Fill_2" data-name="Color Fill 2" class="cls-2" d="M460,150 q -16.26,11.282 -28.272,31.64 -12.89,21.972 -12.89,40.722 a 20.468,20.468 0 0 0 2.05,9.521 q 3.956,7.911 12.452,7.91 18.309,0 37.939,-32.373 18.018,-29.882 18.017,-49.365 0,-14.646 -12.011,-14.648 -7.767,0 -17.285,6.592 v 0 z m 0,53.613 a 45.37,45.37 0 0 1 -5.713,9.082 q -8.058,10.546 -15.088,10.547 a 5.744,5.744 0 0 1 -4.834,-2.637 7.524,7.524 0 0 1 -1.318,-4.395 q 0,-9.372 7.177,-23.583 a 92.43,92.43 0 0 1 17.871,-24.17 q 9.081,-9.081 13.77,-9.082 a 3.881,3.881 0 0 1 3.662,2.2 4.408,4.408 0 0 1 0.732,2.344 q 0,9.084 -13.183,23.877 -4.69,5.272 -4.688,6.445 0,1.614 3.662,4.541 0.145,0.147 -2.05,4.834 v 0 z"/> </svg> Give it a try. Or you may want to just move each path like in this answer: https://stackoverflow.com/a/62637147/2218425
How to place multiple span text inline with SVG image inside an anchor?
This is a noob question, and I spent 2 hrs solving this already. I have an anchor which has SVG and two span text inline. What I'm going to do is inline all the span text with SVG, but I have never reached it. I only made the first span inline with SVG, however for the second span I don't know how to place it under the first span. Can you guys help? :D
Anyway I did:
Making multiple lines of text inline with an image but It inline 1 span only.
/* Title and Subtitle logo */
svg {
filter: url(#Slogo)
}
.logoIcon {
vertical-align: top;
}
#media (max-width: 600px) {
a.navbar-brand span.head-title {
font-size: 16px;
font-weight: bolder;
vertical-align: top;
}
a.navbar-brand span.head-title::after {
content: '\A';
white-space: pre;
}
a.navbar-brand span.head-subtitle {
font-size: 10px;
font-weight: 400;
}
}
#media (min-width: 600px) {
a.navbar-brand span.head-title {
font-size: 20px;
font-weight: bolder;
vertical-align: top;
}
a.navbar-brand span.head-title::after {
content: '\A';
white-space: pre;
}
a.navbar-brand span.head-subtitle {
font-size: 14px;
font-weight: 400;
}
}
<a class="navbar-brand" style="margin-top:0" rel="tooltip" title="Brand" data-placement="bottom" href="<?= base_url() ?>">
<svg xmlns=" http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="35pt" height="35pt" class="logoIcon" viewBox="0 0 150 150" version="1.2">
<defs>
<filter id="Slogo">
<feColorMatrix type="matrix" values="0 1 0 0 0
0 1 0 0 0
0 1 0 0 0
0 1 0 1 0 " />
</filter>
<g>
<symbol overflow="visible" id="glyph0-0">
<path style="stroke:none;" d="M 12.609375 -95.546875 L 67.578125 -95.546875 L 67.578125 0 L 12.609375 0 Z M 19.40625 -6.796875 L 60.78125 -6.796875 L 60.78125 -88.75 L 19.40625 -88.75 Z M 19.40625 -6.796875 " />
</symbol>
<symbol overflow="visible" id="glyph0-1">
<path style="stroke:none;" d="M 68.421875 -26.53125 C 68.421875 -17.90625 65.316406 -11.109375 59.109375 -6.140625 C 52.898438 -1.171875 44.265625 1.3125 33.203125 1.3125 C 23.003906 1.3125 13.984375 -0.601562 6.140625 -4.4375 L 6.140625 -23.265625 C 12.585938 -20.390625 18.046875 -18.363281 22.515625 -17.1875 C 26.984375 -16.007812 31.066406 -15.421875 34.765625 -15.421875 C 39.210938 -15.421875 42.625 -16.269531 45 -17.96875 C 47.375 -19.664062 48.5625 -22.191406 48.5625 -25.546875 C 48.5625 -27.421875 48.035156 -29.085938 46.984375 -30.546875 C 45.941406 -32.003906 44.40625 -33.410156 42.375 -34.765625 C 40.351562 -36.117188 36.226562 -38.273438 30 -41.234375 C 24.15625 -43.984375 19.773438 -46.617188 16.859375 -49.140625 C 13.941406 -51.671875 11.609375 -54.613281 9.859375 -57.96875 C 8.117188 -61.320312 7.25 -65.242188 7.25 -69.734375 C 7.25 -78.179688 10.113281 -84.820312 15.84375 -89.65625 C 21.570312 -94.5 29.492188 -96.921875 39.609375 -96.921875 C 44.566406 -96.921875 49.300781 -96.332031 53.8125 -95.15625 C 58.320312 -93.976562 63.039062 -92.320312 67.96875 -90.1875 L 61.4375 -74.4375 C 56.332031 -76.53125 52.113281 -77.988281 48.78125 -78.8125 C 45.445312 -79.644531 42.171875 -80.0625 38.953125 -80.0625 C 35.117188 -80.0625 32.175781 -79.164062 30.125 -77.375 C 28.082031 -75.59375 27.0625 -73.265625 27.0625 -70.390625 C 27.0625 -68.597656 27.472656 -67.035156 28.296875 -65.703125 C 29.128906 -64.378906 30.445312 -63.097656 32.25 -61.859375 C 34.0625 -60.617188 38.34375 -58.382812 45.09375 -55.15625 C 54.019531 -50.882812 60.140625 -46.601562 63.453125 -42.3125 C 66.765625 -38.019531 68.421875 -32.757812 68.421875 -26.53125 Z M 68.421875 -26.53125 " />
</symbol>
</g>
</defs>
<g id="surface1">
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(87.059021%,67.059326%,53.729248%);fill-opacity:1;" d="M 139.300781 149.542969 L 10.386719 149.542969 C 5.078125 149.542969 0.75 145.21875 0.75 139.90625 L 0.75 10.992188 C 0.75 5.683594 5.078125 1.355469 10.386719 1.355469 L 139.300781 1.355469 C 144.613281 1.355469 148.9375 5.683594 148.9375 10.992188 L 148.9375 139.90625 C 148.9375 145.21875 144.613281 149.542969 139.300781 149.542969 Z M 139.300781 149.542969 " />
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;" d="M 130.820312 72.535156 L 97.136719 42.921875 L 98.167969 87.742188 L 109.066406 77.109375 L 118.664062 97.703125 L 125.257812 94.609375 L 115.660156 74.058594 Z M 130.820312 72.535156 " />
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;" d="M 118.664062 99.273438 C 118.488281 99.273438 118.308594 99.230469 118.128906 99.183594 C 117.722656 99.050781 117.410156 98.738281 117.230469 98.378906 L 108.574219 79.800781 L 99.289062 88.867188 C 98.84375 89.3125 98.167969 89.449219 97.585938 89.179688 C 97.003906 88.957031 96.644531 88.371094 96.601562 87.742188 L 95.566406 42.964844 C 95.566406 42.335938 95.925781 41.753906 96.464844 41.484375 C 97.046875 41.214844 97.722656 41.351562 98.167969 41.753906 L 131.851562 71.367188 C 132.300781 71.769531 132.480469 72.445312 132.300781 73.027344 C 132.121094 73.609375 131.582031 74.058594 130.953125 74.105469 L 117.992188 75.359375 L 126.648438 93.933594 C 127.007812 94.742188 126.695312 95.640625 125.886719 96 L 119.292969 99.09375 C 119.113281 99.230469 118.890625 99.273438 118.664062 99.273438 Z M 109.066406 75.539062 C 109.15625 75.539062 109.246094 75.539062 109.335938 75.585938 C 109.832031 75.675781 110.277344 75.988281 110.457031 76.480469 L 119.382812 95.640625 L 123.152344 93.890625 L 114.226562 74.6875 C 114 74.238281 114.046875 73.699219 114.269531 73.25 C 114.496094 72.800781 114.988281 72.535156 115.480469 72.445312 L 127.050781 71.277344 L 98.796875 46.421875 L 99.648438 84.066406 L 107.945312 75.941406 C 108.261719 75.71875 108.664062 75.539062 109.066406 75.539062 Z M 109.066406 75.539062 " />
<g style="fill:rgb(100%,100%,100%);fill-opacity:1;">
<use xlink:href="#glyph0-1" x="14.848997" y="122.254314" />
</g>
</g>
</svg>
<span class="head-title" style="">Brand Title</span>
<span class="head-subtitle" style="">Brand Subtitle</span>
</a>
How can I accomplish these type of round buttons using HTML / CSS / JavaScript?
What I am trying to accomplish is several buttons aligned like a circle. It is supposed to be circular although it looks like an egg. I hope the image makes sense.
It's not super easy but you can do it. You would basically do something like this only you overlay another circle on the centre.
I think the best way here is to use svg.
Take a look here:
svg{width:170px}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 200">
<path fill="red" d="M 13.3974 50 A 100 100 0 0 1 186.6025 50 L 143.3012 75 A 50 50 0 0 0 56.6987 75 Z"></path>
<path fill="blue" d="M 186.6025 50 A 100 100 0 0 1 100 200 L 100 150 A 50 50 0 0 0 143.3012 75 Z"></path>
<path fill="green" d="M 100 200 A 100 100 0 0 1 13.3974 50 L 56.6987 75 A 50 50 0 0 0 100 150 Z"></path>
<g dominant-baseline="middle" text-anchor="middle" fill="white">
<path id="btn1" d="M 62.5 35.048 A 75 75 0 0 1 137.5 35.048" fill="transparent" />
<path id="btn2" d="M 175 100 A 75 75 0 0 1 137.5 164.9519" fill="transparent" />
<path id="btn3" d="M 62.5 164.9519 A 75 75 0 0 1 25 100" fill="transparent" />
<text>
<textPath startOffset="50%" xlink:href="#btn1">
Button 1
</textPath>
</text>
<text>
<textPath startOffset="50%" xlink:href="#btn2">
Button 2
</textPath>
</text>
<text>
<textPath startOffset="50%" xlink:href="#btn3">
Button 3
</textPath>
</text>
</g>
<text x="100" y="100" dominant-baseline="middle" text-anchor="middle" fill="black">Hello world!</text>
</svg>
You can check here about svg path, and here about text path.
For calculating the x and y of the points on the circle, note that x = centerX + Math.cos(angle) * radius and y = centerY + Math.sin(angle) * radius.
For example, at the example above the viewportis 200*200, so centerX = 100, centerY = 100, with outer radius 100, and inner radius 50. the top part going from angle -5*Math.PI/3, so the x point is 100 + Math.cos(-5*Math.PI/3)*100 = 13.3974 and y point is 100 + Math.sin(-5*Math.PI/3)*100 = 50 and so on
SVG - circle stretched in responsive lines
I made a responsive animation grid with SVG, but I dont know why my circles are stretched. When I resize window in some proportions, then circles looks nice. There you can see - JSFiddle This is my SVG Code <svg height="100%" width="100%" viewBox="0 0 100 100" preserveAspectRatio="none"> <path id="firstLine" d="M 0 100 L 50 0, M 50 0 L 100 100 ,M 100 100 L 0 50 ,M 0 50 L 100 0,M 100 0 L 0 100" class="first-line" style="" stroke="white" stroke-width="1" fill="none" vector-effect="non-scaling-stroke" /> <path id="secondLine" d="M 100 100 L 0 0, M 0 0 L 100 50, M 100 50 L 0 100, M 0 100 L 25 0, M 25 0 L 50 100, M 50 100 L 75 0, M 75 0 L 100 100" class="second-line" style="" stroke="white" stroke-width="1" fill="none" vector-effect="non-scaling-stroke" /> <path id="thirdLine" d="M 50 100 L 0 0, M 0 0 L 25 100, M 25 100 L 50 0, M 50 0 L 75 100, M 75 100 L 100 0, M 100 0 L 50 100" class="third-line" style="" stroke="white" stroke-width="1" fill="none" vector-effect="non-scaling-stroke" /> <circle cx="" cy="" r="1%" fill="red" class="circle" vector-effect="non-scaling-stroke"> <animateMotion dur="60s" repeatCount="indefinite"> <mpath xlink:href="#firstLine"/> </animateMotion> </circle> <circle cx="" cy="" r="1%" fill="red" class="circle" vector-effect="non-scaling-stroke"> <animateMotion dur="60s" repeatCount="indefinite"> <mpath xlink:href="#secondLine"/> </animateMotion> </circle> <circle cx="" cy="" r="1%" fill="red" class="circle" vector-effect="non-scaling-stroke"> <animateMotion dur="60s" repeatCount="indefinite"> <mpath xlink:href="#thirdLine"/> </animateMotion> </circle> <circle cx="35" cy="20" r="1%" fill="red" class="circle" vector-effect="non-scaling-stroke"> </circle> </svg>
Maybe you dont need it now but I could do it giving the viewbox the desired ratio: i.e: 0 0 100 100 for an square ratio 0 0 25 100 for an vertical ratio 0 0 100 25 for a horizontal ratio. Then give to the svg tag a width and height of 100% and put the svg tag inside a div, this way I can keep the ratio of the circles, lines, other draws without stretching when the user resizes the window.
Why does this .svg file not convert to a font?
I'm trying to convert a .svg file to a font, by using http://icomoon.io/app/ app. I don't know why, but it is not working. I already tried it before with other files, and it worked. Here is code for svg image (if you need to see picture just paste it in editor and save as .svg file I guess) I'm not sure, but I think there could be something wrong in a svg code, is it up to lates standards? <?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 width="128pt" height="128pt" viewBox="0 0 128 128" version="1.1" xmlns="http://www.w3.org/2000/svg"> <path fill="#ffffff" d=" M 0.00 0.00 L 128.00 0.00 L 128.00 128.00 L 0.00 128.00 L 0.00 0.00 Z" /> <path fill="#010101" d=" M 53.05 7.85 C 69.60 4.58 87.31 9.41 100.07 20.39 C 100.09 32.60 100.02 44.80 100.02 57.00 C 100.22 60.35 98.92 63.52 97.31 66.38 C 94.98 70.57 92.63 74.75 90.33 78.95 C 89.56 78.96 88.03 78.97 87.27 78.97 C 83.90 84.45 80.91 90.15 77.90 95.83 C 79.17 96.72 80.45 97.58 81.74 98.44 C 80.54 100.57 79.09 102.65 78.71 105.13 C 82.31 106.41 82.80 101.95 84.36 99.87 C 85.56 100.39 86.71 101.06 88.00 101.35 C 89.27 100.96 89.70 99.54 90.37 98.54 C 92.93 93.79 95.58 89.09 98.16 84.36 C 97.57 83.89 96.39 82.95 95.80 82.48 C 98.60 76.74 102.24 71.44 104.82 65.58 C 107.10 60.38 106.35 54.59 106.48 49.08 C 106.59 41.93 106.35 34.77 106.69 27.62 C 115.57 37.75 119.81 51.61 119.26 64.98 C 118.75 80.67 111.02 95.89 98.83 105.75 C 87.62 115.07 72.58 119.59 58.09 118.04 C 42.23 116.69 27.40 107.80 18.19 94.90 C 5.63 77.77 4.45 53.31 15.17 35.00 C 23.09 21.06 37.25 10.76 53.05 7.85 Z" /> <path fill="#ffffff" d=" M 42.57 16.50 C 43.91 15.74 46.15 15.18 46.82 17.24 C 45.33 18.71 43.37 19.45 41.53 20.35 C 31.97 25.09 24.31 33.34 20.08 43.11 C 19.81 45.14 15.82 44.62 17.09 42.48 C 21.83 30.96 31.20 21.53 42.57 16.50 Z" /> <path fill="#ffffff" d=" M 24.15 46.38 C 28.38 35.64 37.29 26.97 48.08 22.92 C 49.71 23.36 49.78 25.53 48.24 26.05 C 39.99 29.47 32.89 35.71 28.77 43.65 C 28.00 45.20 27.09 46.68 26.07 48.08 C 25.59 47.66 24.63 46.81 24.15 46.38 Z" /> <path fill="#ffffff" d=" M 49.39 31.08 C 50.87 30.25 51.93 30.60 52.56 32.14 C 51.39 33.88 49.23 34.34 47.52 35.38 C 42.26 38.38 37.89 43.03 35.31 48.53 C 34.85 49.58 34.15 50.46 33.24 51.18 C 32.37 50.60 31.20 49.45 32.06 48.34 C 35.36 40.67 41.73 34.37 49.39 31.08 Z" /> <path fill="#ffffff" d=" M 57.12 43.35 C 64.70 40.81 73.62 43.30 78.78 49.39 C 85.63 57.22 85.03 70.27 77.30 77.29 C 70.25 84.18 58.20 84.72 50.68 78.29 C 44.68 73.57 41.68 65.19 43.75 57.79 C 45.27 51.06 50.57 45.44 57.12 43.35 Z" /> <path fill="#010101" d=" M 59.35 46.59 C 67.78 44.09 77.35 49.99 79.35 58.47 C 82.31 68.10 74.15 79.10 64.08 79.01 C 56.56 79.62 49.36 74.07 47.41 66.90 C 44.96 58.31 50.63 48.59 59.35 46.59 Z" /> <path fill="#ffffff" d=" M 57.86 62.84 C 57.21 57.61 64.96 54.74 67.86 59.24 C 71.45 63.49 66.35 69.54 61.41 68.10 C 59.77 66.76 57.55 65.28 57.86 62.84 Z" /> </svg>
'Problem' lays within the app. Basicly it changes every path to the same color, so white overlapping paths just blend in. You can delete first path <path fill="#ffffff" d=" M 0.00 0.00 L 128.00 0.00 L 128.00 128.00 L 0.00 128.00 L 0.00 0.00 Z" /> (which is just unnecessary square in the background) to see that it actually works. You will have to convert your paths into a shape so there will be no overlaps but 'cuts'. Out of boredom I created working version: <?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" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 50 50" xml:space="preserve"> <path d="M50,26.1c-0.2,7-3.7,13.9-9.2,18.3c-5,4.2-11.8,6.2-18.3,5.5 c-7.1-0.6-13.8-4.6-17.9-10.4C-1,31.8-1.5,20.8,3.3,12.6c3.6-6.3,9.9-10.9,17-12.2C27.7-1,35.6,1.1,41.4,6.1c0,5.5,0,11,0,16.4 c0.1,1.5-0.5,2.9-1.2,4.2c-1,1.9-2.1,3.8-3.1,5.6c-0.3,0-1,0-1.4,0c-1.5,2.5-2.9,5-4.2,7.6c0.6,0.4,1.1,0.8,1.7,1.2 c-0.5,1-1.2,1.9-1.4,3c1.6,0.6,1.8-1.4,2.5-2.4c0.5,0.2,1.1,0.5,1.6,0.7c0.6-0.2,0.8-0.8,1.1-1.3c1.1-2.1,2.3-4.2,3.5-6.4 c-0.3-0.2-0.8-0.6-1.1-0.8c1.3-2.6,2.9-5,4-7.6c1-2.3,0.7-4.9,0.7-7.4c0-3.2-0.1-6.4,0.1-9.6C48.3,13.9,50.2,20.1,50,26.1z M15.6,4.3C10.5,6.6,6.3,10.8,4.1,16c-0.6,1,1.2,1.2,1.3,0.3c1.9-4.4,5.3-8.1,9.6-10.2c0.8-0.4,1.7-0.7,2.4-1.4 C17.2,3.7,16.2,4,15.6,4.3z M18,7.2C13.2,9,9.2,12.9,7.3,17.7c0.2,0.2,0.6,0.6,0.9,0.8c0.5-0.6,0.9-1.3,1.2-2c1.8-3.6,5-6.4,8.7-7.9 C18.8,8.4,18.8,7.4,18,7.2z M18.6,10.9c-3.4,1.5-6.3,4.3-7.8,7.7c-0.4,0.5,0.1,1,0.5,1.3c0.4-0.3,0.7-0.7,0.9-1.2 c1.2-2.5,3.1-4.6,5.5-5.9c0.8-0.5,1.7-0.7,2.3-1.5C19.8,10.6,19.3,10.5,18.6,10.9z M31.8,19.1c-2.3-2.7-6.3-3.8-9.7-2.7 c-2.9,0.9-5.3,3.5-6,6.5c-0.9,3.3,0.4,7.1,3.1,9.2c3.4,2.9,8.8,2.6,11.9-0.4C34.6,28.4,34.9,22.6,31.8,19.1z M25.2,32.4 c-3.4,0.3-6.6-2.2-7.5-5.4c-1.1-3.9,1.4-8.2,5.4-9.1c3.8-1.1,8.1,1.5,9,5.3C33.4,27.5,29.7,32.4,25.2,32.4z M26.9,23.5 c-1.3-2-4.8-0.7-4.5,1.6c-0.1,1.1,0.9,1.8,1.6,2.4C26.2,28.1,28.5,25.4,26.9,23.5z"/> </svg>