Anchor Tag: Text and svg inline, the best optimal way?

<a href="" class="caction">
	Hire Me!
	<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
			<g>
				<path d="M495.736,290.773C509.397,282.317,512,269.397,512,260.796c0-22.4-18.253-47.462-42.667-47.462H349.918     c-4.284-0.051-25.651-1.51-25.651-25.6c0-4.71-3.814-8.533-8.533-8.533s-8.533,3.823-8.533,8.533     c0,33.749,27.913,42.667,42.667,42.667h119.467c14.182,0,25.6,16.631,25.6,30.396c0,4.437,0,17.946-26.53,20.855     c-4.506,0.495-7.834,4.42-7.586,8.951c0.239,4.523,3.985,8.064,8.516,8.064c14.114,0,25.6,11.486,25.6,25.6     s-11.486,25.6-25.6,25.6h-17.067c-4.719,0-8.533,3.823-8.533,8.533s3.814,8.533,8.533,8.533c14.114,0,25.6,11.486,25.6,25.6     s-11.486,25.6-25.6,25.6h-25.6c-4.719,0-8.533,3.823-8.533,8.533s3.814,8.533,8.533,8.533c8.934,0,17.067,8.132,17.067,17.067     c0,8.61-8.448,17.067-17.067,17.067h-128c-35.627,0-48.444-7.074-63.292-15.258c-12.553-6.921-26.786-14.763-54.963-18.79     c-4.668-0.674-8.994,2.577-9.66,7.236c-0.666,4.668,2.569,8.994,7.236,9.66c25.105,3.584,37.325,10.325,49.152,16.845     c15.497,8.542,31.505,17.374,71.526,17.374h128c17.869,0,34.133-16.273,34.133-34.133c0-6.229-1.775-12.134-4.83-17.229     c21.794-1.877,38.963-20.224,38.963-42.505c0-10.829-4.062-20.736-10.735-28.271C500.42,358.212,512,342.571,512,324.267     C512,310.699,505.634,298.59,495.736,290.773z"/>
				<path d="M76.8,443.733c9.412,0,17.067-7.654,17.067-17.067S86.212,409.6,76.8,409.6c-9.412,0-17.067,7.654-17.067,17.067     S67.388,443.733,76.8,443.733z"/>
				<path d="M179.2,247.467c25.353,0,57.429-28.297,74.3-45.167c36.634-36.634,36.634-82.167,36.634-151.1     c0-5.342,3.191-8.533,8.533-8.533c29.508,0,42.667,13.158,42.667,42.667v102.4c0,4.71,3.814,8.533,8.533,8.533     s8.533-3.823,8.533-8.533v-102.4c0-39.083-20.659-59.733-59.733-59.733c-14.831,0-25.6,10.769-25.6,25.6     c0,66.978,0,107.401-31.633,139.034C216.661,215.006,192.811,230.4,179.2,230.4c-4.719,0-8.533,3.823-8.533,8.533     S174.481,247.467,179.2,247.467z"/>
				<path d="M145.067,213.333H8.533c-4.719,0-8.533,3.823-8.533,8.533v256c0,4.71,3.814,8.533,8.533,8.533h136.533     c4.719,0,8.533-3.823,8.533-8.533v-256C153.6,217.156,149.786,213.333,145.067,213.333z M136.533,469.333H17.067V230.4h119.467     V469.333z"/>
			</g>
	</svg>
</a>

The above is the situation, how can I align text and SVG inline, the best way? I also do not want the text to wrap, all should appear in one line. should I also wrap the text inside another span element? what will be the most elegant way to do this?

If you set the svg to a reasonable size, it falls in line pretty easily.

svg { 
         height: 1.5rem;
         width: auto; 
      }

image

2 Likes

I like to get icons in the background as they are not real content (the text is the content in this case) although it does complicate the css a little but in the other hand makes the html much cleaner.

e.g.

<a href="" class="caction"> Hire Me!</a>

2 Likes

Sir, will putting SVG in this way reduce SEO mileage?

Thanks for the help, and I got it.

It will be better for everyone including SEO as there is less noise in the page. You don’t even describe what the image is anyway so it has to be a background.

2 Likes

How do you encode SVG? These kinds of tools:

https://yoksel.github.io/url-encoder/ ?

That would work.

You might want to consider using external SVG files. That allows them to be cached which will improve performance slightly if used over multiple pages. It also cleans up your css and doesn’t require you to encode the svg.

2 Likes

I have wondered why there is so much code for the fairly simple SVG graphic. Part of the explanation is that the lines of the graphic are in fact filled shapes. This will roughly double the code for the paths. Another reason is that there is unnecessary precision in many of the path point coordinates and Bézier control point coordinates: to three places of decimals within a 512 x 512 viewbox.

The HTML below shows how the code can be very significantly reduced yet produce a very similar image.

<svg viewBox="0 0 36 33" xmlns="http://www.w3.org/2000/svg" stroke="black" fill="none">
<rect x="1" y="15" width="10" height="17" />
<ellipse cx="6" cy="29" rx="0.5" ry="0.5" />
<path d="M 12,16 c 6,0 8,-8 8,-15 c 5,0 5,0 5,12" />
<path d="M 23,13 c 0,1 1,2 2,2 l 8,0 c 3,0 3,4 0,4 c 3,0 3,4 0,4 l -1,0 c 3,0 3,4 0,4 l -2,0 c 3,0 3,4 0,4 l -10,0 c -4,0 -4,-2 -8,-2" />
</svg>
2 Likes

I have tried t 2Y’s back, but when you try to deal with CSS implementations, they are very difficult to handle.

I have created one codepen here:

Through the help of this article, I was able to handle change the color by implementing a filter property on img tag

Yet, I could not get to work to make the background the color(of svg or filling color inside the vacant space of svg) changes in SVG + I also could not make those colored boundaries look fat.

I’m not sure what you are asking but you can’t change external svgs from inside the page. they are just like images so you can’t change anything on the image apart from filters etc.

If you want to change the svg then do that before you save it as an image.

Otherwise if you want ‘on the fly’ fills and colours then you need the svg inline.

1 Like

Sir, this is the raw svg:

<svg width="24px" height="24px" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"  d="M3.48366 4.50129C3.69784 4.48594 3.89791 4.60907 3.98071 4.8072C4.65474 6.41989 6.0646 7.59126 7.61457 8.40147C8.91301 9.08019 10.2693 9.48367 11.2698 9.67576C11.3709 8.53046 11.6537 7.63841 12.0833 6.96373C12.5876 6.17191 13.2745 5.71137 14.0244 5.49345C15.4431 5.08119 17.0383 5.54585 18.0854 6.07381C18.6178 6.11624 19.1448 6.09377 19.6049 6.01495C20.1007 5.93003 20.4799 5.78646 20.7092 5.62254C20.8683 5.50879 21.0791 5.49826 21.2488 5.59559C21.4185 5.69291 21.5158 5.88022 21.4979 6.07499C21.3903 7.24666 21.0416 8.08435 20.6012 8.67818C20.2507 9.15078 19.8546 9.45218 19.5085 9.64326C18.5033 15.9374 15.5662 18.9348 12.1821 20.0126C8.81153 21.0861 5.13384 20.2091 2.78583 19.0961C2.53631 18.9779 2.4299 18.6797 2.54818 18.4302C2.66646 18.1806 2.96463 18.0742 3.21416 18.1925C5.4305 19.2431 8.83541 20.029 11.8786 19.0598C14.8622 18.1095 17.6361 15.4257 18.5594 9.23745C18.5847 9.06794 18.695 8.92319 18.8518 8.85391C19.1186 8.73599 19.48 8.51128 19.798 8.08247C20.0115 7.79466 20.2143 7.40291 20.3526 6.86843C20.1662 6.92297 19.9717 6.9667 19.7738 7.00059C19.1928 7.1001 18.542 7.12185 17.8975 7.06122C17.8328 7.05514 17.7699 7.03652 17.7124 7.00639C16.7655 6.51067 15.4027 6.13429 14.3035 6.45372C13.7736 6.6077 13.2934 6.92532 12.9268 7.50089C12.554 8.08633 12.2801 8.96901 12.2349 10.276C12.23 10.4171 12.1657 10.5496 12.0579 10.6407C11.9501 10.7318 11.8088 10.7731 11.6689 10.7543C10.5559 10.6054 8.8132 10.1564 7.15132 9.28769C5.88971 8.62822 4.64127 7.70892 3.76425 6.46499C3.63754 7.59792 3.64963 9.00448 3.97614 10.434C4.44702 12.4957 5.56438 14.5813 7.84332 15.9926C8.07393 16.1354 8.14862 16.436 8.01166 16.6701C7.71809 17.172 6.79262 18.0339 5.19572 18.2628C4.92237 18.302 4.66902 18.1122 4.62984 17.8388C4.59065 17.5655 4.78048 17.3121 5.05383 17.2729C5.91887 17.1489 6.49682 16.8044 6.82781 16.5197C4.59978 14.9509 3.48317 12.7667 3.00125 10.6567C2.48778 8.40861 2.68744 6.22111 3.03529 4.87492C3.08901 4.66702 3.26948 4.51663 3.48366 4.50129Z" fill="currentColor"/>
</svg>

How can I increase that width, I think it is called stroke-width. I tried this property, but it didn’t work.

The graphic is a filled shape (path) with no stroke.

1 Like

Right, but then how can I increase the width of that colored part, or that is not possible as it was not designed to incorporate such changes?

You can add a stroke to the path. Try inserting this into the path code:
stroke-width="0.5" stroke="currentColor"
That will make the graphic appear bolder.

If you change the stroke colour, you will see that the stroke appears equally on both sides of the path:
twitter path

2 Likes

Further to my previous post, assuming your graphic relates to Twitter, then you should be using an approved form of Twitter logo. Their brand guidelines and legal information is here:

There are broken links on the Twitter website but logos can be downloaded, including SVGs:
https://about.twitter.com/content/dam/about-twitter/en/brand-toolkit/downloads/twitter-logo-01282021.zip

3 Likes

How to fill up this part:

Delete points on the inside of the closed shape (path) and close the curve (path):

<svg width="24px" height="24px" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"  d="M 5.04,17.5 C 5.94533,17.256 6.49733,16.804 6.828,16.52 C 4.6,14.9507 3.48267,12.7667 3.00133,10.6573 C 2.488,8.408 2.688,6.22133 3.03467,4.87467 C 3.08933,4.66667 3.26933,4.516 3.484,4.50133 C 3.69733,4.48533 3.89733,4.60933 3.98133,4.80667 C 4.65467,6.42 6.064,7.59067 7.61467,8.40133 C 8.91333,9.08 10.2693,9.484 11.2693,9.676 C 11.3707,8.53067 11.6533,7.63867 12.0827,6.964 C 12.588,6.172 13.2747,5.712 14.024,5.49333 C 15.4427,5.08133 17.0387,5.54533 18.0853,6.07333 C 18.6173,6.116 19.1453,6.09333 19.6053,6.01467 C 20.1013,5.93067 20.48,5.78667 20.7093,5.62267 C 20.868,5.50933 21.0787,5.49867 21.2493,5.596 C 21.4187,5.69333 21.516,5.88 21.4973,6.07467 C 21.3907,7.24667 21.0413,8.084 20.6013,8.67867 C 20.2507,9.15067 19.8547,9.452 19.508,9.64267 C 18.5027,15.9373 15.5667,18.9347 12.1827,20.012 C 8.812,21.0867 5.13333,20.2093 2.78533,19.096 C 2.536,18.9773 2.42933,18.68 2.548,18.4307 C 2.66667,18.18 3.00933,18.1427 3.3,18.02 Z" fill="currentColor"/>
</svg>
1 Like

Like @Archibald said, especially the last part. If you look at the bottom left of the image you posted, the shape isn’t closed. If it’s not closed, there’s nothing to fill.
bc2d91a160551dff008a956fcb85569b170b983b

And his earlier comment is valid as well, because that logo is not correct. Use one off of twitter itself, and you’ll have the correct markup which you’ll be able to tweak in css.

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.