I have a weird issue. I a musing a sprite for all my SVGs. They all work just fine, and even the one in issue works fine when I run my code locally.
But when I deploy it (firebase), one of the SVGs just doesn't show up. What could be the reason?
Here's the code for two of the SVGs. smile is the one that gives me issues, the other one doesn't.
<symbol id="create" viewBox="0 0 24 24">
<title>create</title>
<path d="M11 6.999c2.395.731 4.27 2.607 4.999 5.001.733-2.395 2.608-4.269 5.001-5-2.393-.731-4.268-2.605-5.001-5-.729 2.394-2.604 4.268-4.999 4.999zm7 7c1.437.438 2.562 1.564 2.999 3.001.44-1.437 1.565-2.562 3.001-3-1.436-.439-2.561-1.563-3.001-3-.437 1.436-1.562 2.561-2.999 2.999zm-6 5.501c1.198.365 2.135 1.303 2.499 2.5.366-1.198 1.304-2.135 2.501-2.5-1.197-.366-2.134-1.302-2.501-2.5-.364 1.197-1.301 2.134-2.499 2.5zm-6.001-12.5c-.875 2.873-3.128 5.125-5.999 6.001 2.876.88 5.124 3.128 6.004 6.004.875-2.874 3.128-5.124 5.996-6.004-2.868-.874-5.121-3.127-6.001-6.001z"/>
</symbol>
<symbol id="smile" viewBox="0 0 24 24">
<title>smile</title>
<path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6 14h-12c.331 1.465 2.827 4 6.001 4 3.134 0 5.666-2.521 5.999-4zm0-3.998l-.755.506s-.503-.948-1.746-.948c-1.207 0-1.745.948-1.745.948l-.754-.506c.281-.748 1.205-2.002 2.499-2.002 1.295 0 2.218 1.254 2.501 2.002zm-7 0l-.755.506s-.503-.948-1.746-.948c-1.207 0-1.745.948-1.745.948l-.754-.506c.281-.748 1.205-2.002 2.499-2.002 1.295 0 2.218 1.254 2.501 2.002z"/>
</symbol>
They are both wrapped between these two together with all the other symbols
<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
.....svgs......
</defs>
</svg>
You can resolve this by changing the <symbol> tag to one of <svg>.
I'm looking through the W3C documentation but I can't find the <symbol> tag, probably you or "firebase" are using some API or something to adjust the code, try something like this:
<svg id="smile" viewBox="0 0 24 24">
<title>smile</title>
<path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6 14h-12c.331 1.465 2.827 4 6.001 4 3.134 0 5.666-2.521 5.999-4zm0-3.998l-.755.506s-.503-.948-1.746-.948c-1.207 0-1.745.948-1.745.948l-.754-.506c.281-.748 1.205-2.002 2.499-2.002 1.295 0 2.218 1.254 2.501 2.002zm-7 0l-.755.506s-.503-.948-1.746-.948c-1.207 0-1.745.948-1.745.948l-.754-.506c.281-.748 1.205-2.002 2.499-2.002 1.295 0 2.218 1.254 2.501 2.002z"/>
</svg>
You may be using an API that I think is also practical, which is the fontAwesome API, it is simple to move and fits well with the text.
Related
I'm looking to change position of a few created SVG shapes with CSS. I've had no trouble positioning them from the beginning, and I've been able to re-position other objects like rectangles and circles with CSS. But I can't figure out how to do it with a path. I've done searches both here and through Google search for several hours, but haven't found any usable clues. I'm beginning to suspect that there is something about SVG paths I haven't understood fully yet, but at the same time I can't help but think that it might just be down to me not understanding the correct syntax in CSS.
Below is an SVG elliptical arc path I've created. I'd like to move it anywhere within view (so I can spot the difference and work from there). Can someone tell me if I'm lacking some knowledge about how paths work (contrary to how rectangles work in this regard), or if I just need the proper syntax in CSS?
Please note: I do NOT want to animate it in any way, just move it to a new position if possible.
<svg xmlns="http://www.w3.org/2000/svg">
<path id="cockpit" d="M 0 0 A 50 37.5 0 0 1 50 0" fill="lightblue" stroke="blue" stroke-width="1" stroke-miterlimit="5"/>
</svg>
You can move the path using transform/translate either as a CSS property (first example) or as an attribute (second example).
I also added the viewBox attribute to the SVG element -- then it's easier to see where you place the path in the SVG.
svg {
background: orange;
}
path {
transform: translate(10px, 10px);
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 20">
<path id="cockpit" d="M 0 0 A 50 37.5 0 0 1 50 0" fill="lightblue"
stroke="blue" stroke-width="1" stroke-miterlimit="5"/>
</svg>
svg {
background: orange;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 20">
<path id="cockpit" d="M 0 0 A 50 37.5 0 0 1 50 0" fill="lightblue"
stroke="blue" stroke-width="1" stroke-miterlimit="5" transform="translate(10 10)" />
</svg>
The capital A in your path M 0 0 A 50 37.5 0 0 1 50 0 makes it Arc at an absolute position
If you convert that whole path to use a relative a position: M0 0 a 50 37.5 0 0 1 50 0
(use https://yqnn.github.io/svg-path-editor/# for more complex paths)
You can use the first M x y notation to position the path anywhere in the viewBox
<style>
svg { background:hotpink; height:50px }
path { fill:lightblue; stroke:blue }
</style>
<svg viewBox="0 0 55 10">
<path d="M 0 7 a 50 37.5 0 0 1 50 0" />
</svg>
<svg viewBox="0 0 55 10">
<path d="M 14 7 a 50 37.5 0 0 1 50 0" />
</svg>
<svg viewBox="0 0 55 10">
<path d="M 4 9 a 50 37.5 0 0 1 50 0" />
</svg>
<svg viewBox="0 0 55 10">
<path d="M 4 12 a 50 37.5 0 0 1 50 0" />
</svg>
I finally got on track with 'offset-path', and with some tinkering I managed to understand enough about how it works to move the path to a new position:
offset-path: path("M237.5 50");
I am simply trying to render the svg on the page however it is not loading.
<svg viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"
stroke-linejoin="round" stroke-miterlimit="2">
<g transform="matrix(.48451 0 0 .60177 -438.2 27)">
<path fill="none" d="M906.2-44.5h55.3V0h-55.3z" />
<clipPath id="a">
<path d="M906.2-44.5h55.3V0h-55.3z" />
</clipPath>
<g clip-path="url(#a)">
<path
d="M928.5-.4v-5.8l6.3-3 6.3 3v5.5a33.8 33.8 0 01-12.6.3zM916-6.9A42.1 42.1 0 00927-1.6v1a33.4 33.4 0 01-12.5-5.7L916-7zm37.8.3A29.6 29.6 0 01942-1v-5.3l6.2-3 5.5 2.6zm-26-12.1l6.3 2.9v5.8l-6.3 3-6.3-3v-5.8l6.3-3zM907.4-16l6-2.7 6.3 2.9v5.8l-6.1 2.8c-2.9-2.5-5-5.4-6.2-8.8zm53.2-.3a21.4 21.4 0 01-6 8.9l-5.5-2.6v-5.8l6.3-3 5.2 2.5zm-12.3-12l6.2 3v5.8l-6.2 2.9-6.3-3v-5.8l6.3-3zm-13.5 0l6.3 3v5.8l-6.3 2.9-6.2-3v-5.8l6.2-3zm-27.5 0l6.1 3v5.8l-6.3 2.9a18.2 18.2 0 01.2-11.6zm52.2 10.4c.5-1.7.6-3 .6-4.6 0-1.7-.6-3.4-1-4.5l1.5-.7a17.1 17.1 0 01.2 10.5l-1.3-.7zm-31.8-20L934-35v5.8l-6.3 3-6.3-3V-35l6.3-3zm-13.8.2l5.8 2.7v5.8l-6.3 3-5.9-2.8a22 22 0 016.4-8.7zm40.4.3c2.8 2.5 5 5.4 6.2 8.7l-5.1 2.4-6.3-2.9V-35l5.2-2.4zM942-43.6c4.3 1 8.2 3 11.4 5.4l-5.1 2.4-6.3-3v-4.8zm-13.4-.6a34.7 34.7 0 0112.5.4v5l-6.3 3-6.2-3v-5.4zm-1.2 1.5c-2.3.5-4.6 1.2-6.1 2-1.6.6-4 2.1-5.1 3l-1.4-.6a30.1 30.1 0 0112.6-5.7v1.3z"
fill="#404040" />
</g>
</g>
</svg>
This is my SVG from my HTML, on the webpage it is loaded.
However it doesn't render to the page.
I should add I also have a width and height on the svg of 25px.
Maybe there is something on top the icon. Try with
svg {
width: 25px;
z-index: 200;
}
<clipPath id="b">
<path d="M712 0h39.1v23.6H712z"/>
</clipPath>
<g clip-path="url(#b)">
Id's for all components were the same. Ids need to be unique. Must have been a setting in Affinity Designer.
I hate weird Matrix conversions.
Your SVG is a soccerball, and I presume all that mumbo jumbo is to make it look round? It is not round!
I multiplied the path by 10 with: https://yqnn.github.io/svg-path-editor/
Made it a Relative path so positioning is all done with the first M225 444
adjusted viewBox
removed SVG mumbo jumbo
added <circle> for reference
Took some minutes to adjust to scale(1.08, 1.333) and position with M225 444
re-adjusted viewBox
<svg viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2">
<circle cx='50%' cy='50%' r='50%' fill='red'></circle>
<g transform="matrix(.48451 0 0 .60177 -438.2 27)">
<path fill="none" d="M906.2-44.5h55.3V0h-55.3z" />
<clipPath id="a">
<path d="M906.2-44.5h55.3V0h-55.3z" />
</clipPath>
<g clip-path="url(#a)">
<path d="M928.5-.4v-5.8l6.3-3 6.3 3v5.5a33.8 33.8 0 01-12.6.3zM916-6.9A42.1 42.1 0 00927-1.6v1a33.4 33.4 0 01-12.5-5.7L916-7zm37.8.3A29.6 29.6 0 01942-1v-5.3l6.2-3 5.5 2.6zm-26-12.1l6.3 2.9v5.8l-6.3 3-6.3-3v-5.8l6.3-3zM907.4-16l6-2.7 6.3 2.9v5.8l-6.1 2.8c-2.9-2.5-5-5.4-6.2-8.8zm53.2-.3a21.4 21.4 0 01-6 8.9l-5.5-2.6v-5.8l6.3-3 5.2 2.5zm-12.3-12l6.2 3v5.8l-6.2 2.9-6.3-3v-5.8l6.3-3zm-13.5 0l6.3 3v5.8l-6.3 2.9-6.2-3v-5.8l6.2-3zm-27.5 0l6.1 3v5.8l-6.3 2.9a18.2 18.2 0 01.2-11.6zm52.2 10.4c.5-1.7.6-3 .6-4.6 0-1.7-.6-3.4-1-4.5l1.5-.7a17.1 17.1 0 01.2 10.5l-1.3-.7zm-31.8-20L934-35v5.8l-6.3 3-6.3-3V-35l6.3-3zm-13.8.2l5.8 2.7v5.8l-6.3 3-5.9-2.8a22 22 0 016.4-8.7zm40.4.3c2.8 2.5 5 5.4 6.2 8.7l-5.1 2.4-6.3-2.9V-35l5.2-2.4zM942-43.6c4.3 1 8.2 3 11.4 5.4l-5.1 2.4-6.3-3v-4.8zm-13.4-.6a34.7 34.7 0 0112.5.4v5l-6.3 3-6.2-3v-5.4zm-1.2 1.5c-2.3.5-4.6 1.2-6.1 2-1.6.6-4 2.1-5.1 3l-1.4-.6a30.1 30.1 0 0112.6-5.7v1.3z" fill="#404040" />
</g>
</g>
</svg>
<!-- My Version: -->
<svg viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg">
<circle cx='50%' cy='50%' r='50%' fill='green'></circle>
<path transform="scale(1.08, 1.333)" fill='#404040' d='M225 444v-58l63-30l63 30v55a338 338 90 01-126 3zm-125-65a421 421 90 00110 53v10a334 334 90 01-125-57l15-7zm378 3a296 296 90 01-118 56v-53l62-30l55 26zm-260-121l63 29v58l-63 30l-63-30v-58l63-30zm-204 27l60-27l63 29v58l-61 28c-29-25-50-54-62-88zm532-3a214 214 90 01-60 89l-55-26v-58l63-30l52 25zm-123-120l62 30v58l-62 29l-63-30v-58l63-30zm-135 0l63 30v58l-63 29l-62-30v-58l62-30zm-275 0l61 30v58l-63 29a182 182 90 012-116zm522 104c5-17 6-30 6-46c0-17-6-34-10-45l15-7a171 171 90 012 105l-13-7zm-318-200l63 29v58l-63 30l-63-30v-58l63-30zm-138 2l58 27v58l-63 30l-59-28a220 220 90 0164-87zm404 3c28 25 50 54 62 87l-51 24l-63-29v-58l52-24zm-123-62c43 10 82 30 114 54l-51 24l-63-30v-48zm-134-6a347 347 90 01125 4v50l-63 30l-62-30v-54zm-12 15c-23 5-46 12-61 20c-16 6-40 21-51 30l-14-6a301 301 90 01126-57v13z' />
</svg>
<style>
svg {
background: pink;
width:180px;
}
</style>
I want it so that when a user clicks on the heart icon, the heart-icon is hidden and the heart-filled-icon is shown. How do I refer to the other icon within my jQuery function to change it's "display" from "none" to "shown"? I know that this example is really wrong this is just an idea of what I want to do and I can't figure it out.
$('.heart-icon').click(function(){
$('.heart-icon').hide();
$('.heart-filled-icon').show();
});
<svg width="1em" height="1em" viewBox="0 0 16 16" class="heart-icon bi bi-heart" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M8 2.748l-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/>
</svg>
<svg width="1em" height="1em" style ="display:none;" viewBox="0 0 16 16" class="heart-filled-icon bi bi-heart-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z"/>
</svg>
There are many different ways you can do this...
One way is to toggle the Bootstrap display classes. Put either d-none or d-block on the SVG's classes initially.
$('.bi').click(function(){
$('.bi').toggleClass('d-none d-block');
})
https://codeply.com/p/FmVXaxOvoA
I can't understand this SVG path code. Normally SVG path code is not like this. This code draws letters "The Verge". I want to draw some other stuff by doing the same method. By I can't understand the code, I tried many different things but could not draw the letters, I want to draw by applying the same code method as mentioned below.
Below is the code
<svg fill="#fff" xmlns="http://www.w3.org/2000/svg" viewbox="0 291.4 1280 217.2">
<path d="M0 292.1v58.1h39.7v153.2h67.1V292.1M220.1
372.4h-31.4v-22.3h15.8v-58h-82.8v211.3h67v-79.9h31.4v79.9h67.2V292.1h-67.2M302 503.4h124.3v-58.2h-60.2v-24.6h38.3v-48.2h-38.3v-22.2h60.2v-58.1H302M954.8 363.6c0-45.6-33.7-71.5-81.5-71.5h-74.7v211.2h67.1v-54.1l38.4 54.1h75.7l-54.4-81c19.6-10.7 29.4-30.2 29.4-58.7M865.5 387v-39.3c9.3 0 20.7 2.8 24.1 13 .3.9.5 1.9.8 2.9 0 .1 0 .3.1.4.1 1 .3 2.2.3 3.4 0 15.7-14.3 19.6-25.3 19.6M559.2 420.8h-.6l-4.8-17.4-15-53.1h26.4l17.4-58.2h-134l76.8 211.2h68.8l8.3-22.6s36.8-99.8 56.9-154.2v176.8h124.3v-58.2h-60.2v-24.6h38.2v-48.1h-38.2v-22.2h60.2V292H598l-38.8 128.8zM1280 350.3v-58.1h-124.3v211.2H1280v-58.2h-60.3v-24.6h38.3v-48h-38.3v-22.3">
</path>
<path d="M1142.8 459.1V373H1048v48h35.3v17.1c-2.7 2.4-8.5 3.7-14.5 3.7-24.6 0-42.8-19.4-42.8-43.1s17.7-44.7 42.3-44.7c14.9 0 50.2.1 50.2.1v-62.6h-16.1c-30 0-59.9-2.4-87.4 11.8-21.7 11.2-38.9 30.2-48 52.8-5.3 13.3-8 27.7-8 42 0 59.9 47 110.4 107.9 110.4 30.2 0 59.7-11.3 75.8-25.4.1-14.6.1-16.8.1-24">
</path>
<path d="M0 292.1v58.1h39.7v153.2h67.1V292.1M220.1
372.4h-31.4v-22.3h15.8v-58h-82.8v211.3h67v-79.9h31.4v79.9h67.2V292.1h-67.2M302 503.4h124.3v-58.2h-60.2v-24.6h38.3v-48.2h-38.3v-22.2h60.2v-58.1H302M954.8">
</path>
</svg>
i need to help for design a shape for footer in project similar to this image. please help me.
How is designing shape similar to waves with html and css. with border-radius is possible or with SVG?
Is it possible to be responsive?
my svg code:
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="100%" height="200px" viewBox="0 0 1366 432"
preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,432.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M0 1710 l0 -1710 10000 0 10000 0 0 114 0 113 -127 100 c-833 653
-1848 1155 -2883 1427 -681 179 -1808 322 -3055 388 -328 18 -1972 18 -2340 0
-1091 -51 -1781 -111 -3645 -317 -1898 -209 -2407 -249 -3230 -249 -682 -1
-1004 26 -1490 125 -1101 225 -2207 812 -2996 1590 l-131 129 -51 0 -52 0 0
-1710z"/>
</g>
</svg>
but it not fullwith. try it
Update your SVG file. Change:
preserveAspectRatio="xMidYMid meet"
to
preserveAspectRatio="none"
Likely tricky to pull that off with pure css. I would try using a CSS shape builder tool online if you truly want to use CSS.
Make this will help? http://html-generator.weebly.com/css-shape-generator.html#y