Been playing around with SVGS today and I'm wondering how I would make what I've done fully responsive. I've made this JS fiddle below to show everyone.
<div id="cont" data-pct="25">
<svg id="svg" width="200" height="200" viewPort="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="grad1" cx="80%" cy="60%" r="70%" fx="60%" fy="40%">
<stop offset="0%" style="stop-color:rgb(33,204,185);" />
<stop offset="100%" style="stop-color:rgb(31,98,205);stop-opacity:1" />
</radialGradient>
</defs>
<circle r="90" cx="100" cy="100" fill="transparent" stroke-dasharray="565.48" stroke-dashoffset="0"></circle>
<circle id="bar" r="90" cx="100" cy="100" stroke="url(#grad1)" fill="transparent" stroke-dasharray="565.48" stroke-dashoffset="0"></circle>
</svg>
</div>
https://jsfiddle.net/x152qo95/1/
At the moment it has fixed widths and heights.
I can make it work without the width being 100% but can't get it aligned properly with the height.
Looking forward to learning solutions to this.
Your viewBox was too small. This should work:
<svg id="svg" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg">
Related
I am wanting to add an SVG logo that I have (I have the SVG code also) on top of a rectangle with a radial background colour that also contains some title text, however I'm unsure of how to do this.
For context, I am using React-PDF, so the syntax is slightly different.
Currently I have
<Svg width="555" height="80" viewBox="0 0 555 80">
<Defs>
<RadialGradient id="header-rectangle" cx="0" cy="0" fr="1">
<Stop stopColor="#A01858"/>
<Stop offset="1" stopColor="#87005F"/>
</RadialGradient>
</Defs>
<Rect width="555" height="80" rx="8" fill="url(#header-rectangle)"/>
<Text style={styles.svg} x={`${555-20}px`} y="50%" textAnchor="end" dominantBaseline="middle">Some title here</Text>
</Svg>
I then also have my SVG logo (shortened here for conciseness):
<Svg width="80" height="52" viewBox="0 0 80 52" fill="none">
<Path d="M0 47.6941V37.8042C0... fill="green"/>
...
</Svg
I am wondering how I can add the logo to the main piece...
I have attempted to place the full <Svg>/*logo*/</Svg> to the main section, but this produced an error:
I have also tried moving all of the <Path> pieces into the main block, without the <Svg> wrapper, which did work to some extent, but then I found that I didn't know how to move them down and right...
This is the example:
<Svg width="555" height="80" viewBox="0 0 555 80">
<Defs>
<RadialGradient id="header-rectangle" cx="0" cy="0" fr="1">
<Stop stopColor="#A01858"/>
<Stop offset="1" stopColor="#87005F"/>
</RadialGradient>
</Defs>
<Rect width="555" height="80" rx="8" fill="url(#header-rectangle)"/>
<Text style={styles.svg} x={`${555-20}px`} y="50%" textAnchor="end" dominantBaseline="middle">Some title here</Text>
<Path d="M0 47.6941V37.8042C0... fill="green"/>
/* rest of the logo svg paths here */
</Svg>
You can wrap your logo in a group and apply a transform to it
<svg width="555" height="80" viewBox="0 0 555 80">
<defs>
<radialGradient id="header-rectangle" cx="0" cy="0" fr="1">
<stop stop-color="#A01858"/>
<stop offset="1" stop-color="#87005F"/>
</radialGradient>
</defs>
<rect width="555" height="80" rx="8" fill="url(#header-rectangle)"/>
<text x="500" y="50%" text-anchor="end" dominant-baseline="middle">Some title here</text>
<g transform="translate(20,10) scale(0.5 0.5)">
<path d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z" fill="green" />
</g>
</svg>
I want to get something like this
i have tried using strokeDashoffset and strokeDasharray but i still can't get it, ik that i can draw multiple lines but i will have a script that will have to fill these lines
any ideas how can i make them? thanks
i don't know if you need it but here is what i tried:
<svg id="edilRW8EQ5h1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 54 12.5" shape-rendering="geometricPrecision" text-rendering="geometricPrecision">
<path strokeDasharray="10, 10" strokeDashoffset="10" pathLength="500" d="M0,6.25h54v2.134695h-54L0,6.25" fill="white" stroke="#3f5787" stroke-width="0.5"/>
</svg>
This looks a lot like a <pattern>. Here I use the pattern on a <rect> and at the same time the <rect> also has a mask. The mask has a gradient that controls the the whiteness.
It looks a bit like a meter. The "value" of the meter can now be controlled by the value of the two stop elements in the gradient (here 76%).
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 8">
<defs>
<pattern id="p1" viewBox="0 0 6 10" width="5%" height="100%">
<path transform="translate(4 0) rotate(10)" d="M 0 0 V 10"
stroke-width="4" stroke="white" stroke-linecap="round"/>
</pattern>
<linearGradient id="g1" gradientTransform="rotate(1.5)">
<stop offset="0" stop-opacity=".2" stop-color="white" />
<stop offset="76%" stop-opacity="1" stop-color="white" />
<stop offset="76%" stop-opacity=".2" stop-color="white" />
<stop offset="100%" stop-opacity=".2" stop-color="white" />
</linearGradient>
<mask id="m1">
<rect width="50" height="8" fill="url(#g1)"/>
</mask>
</defs>
<rect width="50" height="8" fill="black"/>
<rect width="50" height="8" fill="url(#p1)" mask="url(#m1)"/>
</svg>
Im trying to make sure the height and width of an SVG divider is responsive but also clip an image into one of the layers to get this effect:
HERE
The issue I'm having right now since the only way to make this responsive both vertically and horizontally with 100vh and 100vw is the image squishing and skewing. Is there a way to preserve the aspect ratio of the image while retaining its responsiveness? Am I missing something basic here?
A link to my current attempt:
https://codepen.io/Tay8472/pen/mdLpOqw
Code snippet below:
<svg id="test_clip" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1069" preserveAspectRatio="none">
<clipPath id="mask_cc_1">
<path d="M0,1025.25c246.56-43.45,560.46-69.79,891-10.97,34.54,6.15,49.46,9.7,83.74,15.91,219.17,39.72,525.11,60.44,945.26,4.92V0H0V1025.25Z"/>
</clipPath>
<image id="test_cc" class="image__svg-image" width="110%" height="110%" clip-path="url(#mask_cc_1)" x="-35%" preserveAspectRatio="xMinYMin" xlink:href="https://www.cupcakebowls.com/wp-content/uploads/2022/09/overlay_cupcake_v1.svg" />
</svg>
<!-- <svg id="test_clip_2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 506" >
</svg> -->
<svg id="home_gradient_backdrop" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 1069" preserveAspectRatio="none">
<defs>
<style>.home_gradient_overlay{fill:url(#radial-gradient);}</style>
<radialGradient id="radial-gradient" cx="1303.67" cy="727.5" fx="1303.67" fy="727.5" r="1555.2" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#f5428d"/>
<stop offset=".3" stop-color="#da40a1"/>
<stop offset=".95" stop-color="#953dd5"/>
<stop offset="1" stop-color="#903dda"/>
</radialGradient>
</defs>
<path class="home_gradient_overlay" d="M0,1025.25c246.56-43.45,560.46-69.79,891-10.97,34.54,6.15,49.46,9.7,83.74,15.91,219.17,39.72,525.11,60.44,945.26,4.92V0H0V1025.25Z"/>
</svg>
<svg id="home_pink_secondary_backdrop" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080" preserveAspectRatio="none">
<defs>
<style>.home_pink_backdrop{fill:#ffaed0;}</style>
</defs>
<path class="home_pink_backdrop" d="M0,1080c227-61.03,475.1-86,816-67.91,146.98,7.8,214.97,30.58,381,43.87,299.08,23.93,552.7,2.08,723-20.84V0H0V1080Z"/>
</svg>
I have a svg and I want to put an image inside of it.
The svg looks like a wave.
The image should be in front of the wave (visible) but the problem is it is now hiding behind the wave.
I tried already with a higher z-index but without result.
How can I make the image visible in front of the wave?
<svg class="defs-only" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol id="wave">
<svg viewBox="0 0 100 50" preserveAspectRatio="none" >
<g>
<!--<path d="M100,30 Q70,40 50,30 T0,30 v20 h100Z" -->
<path d="M100,30 Q70,60 50,30 T0,30 v20 h100Z"
style="stroke-linejoin:round; stroke:#f6f6f6" stroke-width="0"/>
</g>
</svg>
</symbol>
</svg>
<div class="svg-header-wave">
<svg class="header-wave" style="width: 100%; height: 150px" fill="url(#gradient)">
<image xlink:href="http://develop.webprofis.nl/wisselslag/img/logo.png" x="0" y="-30" width="300px" height="150px" style="z-index: 9999"/>
<defs>
<linearGradient id="gradient">
<stop offset="0%" stop-color="#009de1"/>
<stop offset="100%" stop-color="#102b72"/>
</linearGradient>
</defs>
<use xlink:href="#wave"/>
</svg>
</div>
Here is a fiddle you can see what happens:
https://jsfiddle.net/jotect8j/7/
Just include the image tag after the wave.
SVG elements are by default layed over top of one another in the order of their inclusion.
So first element is at the bottom, while last is on top.
<svg class="header-wave" style="width: 100%; height: 150px" fill="url(#gradient)">
<defs>
<linearGradient id="gradient">
<stop offset="0%" stop-color="#009de1"/>
<stop offset="100%" stop-color="#102b72"/>
</linearGradient>
</defs>
<use xlink:href="#wave"/>
<image xlink:href="http://develop.webprofis.nl/wisselslag/img/logo.png" x="0" y="-30" width="300px" height="150px" style="z-index: 9999"/>
</svg>
https://jsfiddle.net/gwat00Lr/1/
<svg class="defs-only" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol id="wave">
<svg viewBox="0 0 100 50" preserveAspectRatio="none" >
<g>
<!--<path d="M100,30 Q70,40 50,30 T0,30 v20 h100Z" -->
<path d="M100,30 Q70,60 50,30 T0,30 v20 h100Z"
style="stroke-linejoin:round; stroke:#f6f6f6" stroke-width="0"/>
</g>
<image xlink:href="http://develop.webprofis.nl/wisselslag/img/logo.png" x="0" y="-30" width="300px" height="150px" style="z-index: 9999"/>
</svg>
</symbol>
</svg>
<div class="svg-header-wave">
<svg class="header-wave" style="width: 100%; height: 150px" fill="url(#gradient)">
<defs>
<linearGradient id="gradient">
<stop offset="0%" stop-color="#009de1"/>
<stop offset="100%" stop-color="#102b72"/>
</linearGradient>
</defs>
<use xlink:href="#wave"/>
</svg>
</div>
Here is a fiddle with working demo
I have the following graphic embedded into markup:
<div id="svgContainer" >
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
preserveAspectRatio="xMaxYMin meet"
viewBox="0 0 1800 1111">
<defs>
<linearGradient id="gradient" x1="0" y1="00%" x2 ="0" y2="100%">
<stop stop-color="black" offset="0"/>
<stop stop-color="white" offset="1"/>
</linearGradient>
<mask id="masking" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
<rect y="0.3" width="1" height=".7" fill="url(#gradient)" />
<circle cx=".5" cy=".5" r=".5" fill="white" />
</mask>
</defs>
<foreignObject width="100%" height="100%"
id="coverImageContainer" mask="url(#masking)">
<img id="coverImage" src="/images/v3/eminem-cover.jpg" />
</foreignObject>
</svg>
</div>
On Safari and Chrome, the graphic resizes appropriately using the center of the graphic as the appropriate anchor point. On Firefox, however, the image resizes as thought I had set preserveAspectRatio on the svg element to xMinYMax meet. Any ideas what's causing this discrepency in behavior?