I am using lib react-native-svg to display SVG in my mobile app. In iOS, it is showing properly but on android, it shows cutoff. I will also attach a screenshot for reference, Can someone please help me how to solve this problem?
iOS Screenshot
Android Screenshot
SVG snap
export const SVGIcon = (props: SvgProps) => (
<Svg
width={170}
height={150}
style={{ marginRight: 12, marginTop: 1 }}
fill="none"
viewbox="0 0 46 46"
xmlns="http://www.w3.org/2000/svg"
{...props}>
<Mask
id="a"
style={{
maskType: 'alpha',
}}
maskUnits="userSpaceOnUse"
x={21}
y={7}
width={136}
height={135}>
<Rect
x={21.25}
y={7.25}
width={135.5}
height={134.5}
rx={19.75}
fill="#fff"
stroke="#FAB405"
strokeWidth={0.5}
/>
</Mask>
<G mask="url(#a)">
<Path d="M129.103 84.136h-84.34v31.103h84.34V84.136Z" fill="#3E3E3E" />
<Path
d="M105.994 130.267c9.806 0 17.756-7.957 17.756-17.773 0-9.815-7.95-17.772-17.756-17.772-9.806 0-17.755 7.957-17.755 17.772 0 9.816 7.95 17.773 17.755 17.773Z"
fill="#111"
/>
<Path
d="M105.994 122.295c5.408 0 9.792-4.388 9.792-9.801s-4.384-9.801-9.792-9.801c-5.407 0-9.791 4.388-9.791 9.801s4.384 9.801 9.791 9.801Z"
fill="#F1F1F1"
/>
<Path
d="M105.994 120.727c4.543 0 8.225-3.686 8.225-8.233 0-4.547-3.682-8.233-8.225-8.233-4.542 0-8.225 3.686-8.225 8.233 0 4.547 3.683 8.233 8.225 8.233Z"
fill="#BCBCBC"
/>
<Path
d="m-33.047 96.682 2.61 21.693H84.845s-1.305-21.301 13.84-26.398c15.144-5.096 30.68 5.358 28.46 25.614l16.189-.392s1.958.261 1.567-3.136c-.392-3.398 0-14.245 0-14.245l-1.567-1.96-1.828-20.648s-.652-3.397-8.616-5.75c-7.964-2.352-36.817-8.494-36.817-8.494s-2.611-1.046-3.394-2.222c-.784-1.176-15.798-26.267-15.798-26.267s-3.002-1.96-4.177-2.744c0 0-6.92-15.943-31.464-22.477C16.694 2.722-13.203.239-13.203.239h-4.047v93.045h-14.883l-.914 3.398Z"
fill="#F5A81F"
/>
<Path
d="M-33.047 96.682h84.73l4.178 6.534h30.811v18.034h-119.72l-3.133-24.568h3.134Z"
fill="#3E3E3E"
/>
<Mask
id="b"
style={{
maskType: 'alpha',
}}
maskUnits="userSpaceOnUse"
x={-33}
y={-1}
width={179}
height={120}>
<Path
d="m-32.917 96.42 2.611 21.694h115.28s-1.305-21.302 13.84-26.398c15.144-5.097 30.68 5.358 28.461 25.614l16.189-.392s1.958.261 1.566-3.137c-.391-3.398 0-14.244 0-14.244l-1.566-1.96-1.828-20.648s-.653-3.398-8.617-5.75-36.816-8.494-36.816-8.494-2.611-1.046-3.395-2.222c-.783-1.176-15.797-26.267-15.797-26.267s-3.003-1.96-4.178-2.744c0 0-6.92-15.944-31.464-22.478C16.825 2.46-13.072-.023-13.072-.023h-4.047v93.046h-14.884l-.914 3.398Z"
fill="#F5A81F"
/>
</Mask>
<G mask="url(#b)">
<Path
d="M144.769 103.216s-3.655-15.682-22.977-18.426c-19.323-2.745-30.681-.262-41.778 18.426l-2.35 14.636 69.325-1.045-2.22-13.591Z"
fill="#FFC533"
/>
</G>
<Path
d="M52.858 35h17.756L86.28 61.136 78.84 72.898h-25.98V35Z"
fill="#DEDEDC"
/>
<Path
d="M22.047 9.517v83.636"
stroke="#FFC533"
strokeWidth={0.25}
strokeMiterlimit={10}
/>
<Path
d="M22.047 101.909v12.807"
stroke="#1E1E1E"
strokeWidth={0.25}
strokeMiterlimit={10}
/>
<Path
d="M78.055 93.153H-12.81"
stroke="#FFC533"
strokeWidth={0.25}
strokeMiterlimit={10}
/>
<Path d="M78.055 112.494H-34.614v5.228h112.67v-5.228Z" fill="#111" />
<Mask
id="c"
style={{
maskType: 'alpha',
}}
maskUnits="userSpaceOnUse"
x={46}
y={24}
width={41}
height={50}>
<Path
d="m50.639 73.16-3.917-46.393.653-1.96 32.639 3.267 6.528 33.324-7.834 11.761h-28.07Z"
fill="#C4C4C4"
/>
</Mask>
<G mask="url(#c)">
<Path
d="m55.73 49.767 4.831 3.006c.783-.915 1.306-2.091 1.697-3.006 0-.13.13-.261.13-.523.393-.914.523-1.83.784-2.483 0-.13 0-.261.13-.261.131-.523-2.61-1.568-4.177-2.222-.522-.261-.914-.392-1.044-.522 0 0 .26.653.26 1.045 0 1.046-.26 1.83-.783 2.483-1.044 1.699-1.828 2.483-1.828 2.483Z"
fill="#FFAE73"
/>
<Path
d="M57.95 44.932s1.697 4.051 4.439 4.835c0-.13.13-.261.13-.523.392-.914.523-1.83.784-2.483-.392-.522-2.742-1.437-4.178-2.09-.783.13-1.175.26-1.175.26Z"
fill="#F9924F"
/>
<Path
d="M63.694 47.415s-6.136 1.83-7.18-2.091c-1.045-3.92-2.611-6.273 1.305-7.58 3.917-1.306 5.092 0 5.745 1.176 1.828 3.137.914 6.012.13 8.495Z"
fill="#FFAE73"
/>
<Path
d="M64.87 58.784s8.616 9.279 15.797 11.108c0 0 2.22 0 2.61-2.875.262-1.83-14.1-14.767-18.538-14.898-4.308-.13-1.175 4.705.13 6.665Z"
fill="#427C4D"
/>
<Path
d="M57.558 84.006c.523 1.437 1.436 2.483 2.611 2.875 1.306.522 3.134.522 5.092 0 2.35-.523 4.7-1.569 6.658-2.483 1.045-.523 1.959-1.176 2.48-1.568 2.743-2.222-7.18-4.836-5.613-12.546 3.133-15.551-3.133-17.25-4.308-18.818-2.22-2.744-8.747-.392-8.747-.392-1.175 1.699-2.09 3.92-2.35 7.318-.131 1.307 0 3.136.391 5.227.914 6.273 3.003 14.375 3.134 16.335 0 1.569.26 2.876.652 4.052Z"
fill="#759F7E"
/>
<Path
d="M55.992 47.938s-.523 2.874-.261 3.267c0 0 6.136-.654 9.008.522 0 0-1.306-2.352-2.48-2.875-1.045-.392-6.267-.914-6.267-.914ZM54.817 62.051c6.92 6.142 14.491-4.966 14.491-4.966-.653-1.045-1.697-1.83-3.003-2.352-3.263 1.568-7.31 4.313-8.486 4.705-.652.13-2.48 2.09-3.002 2.613Z"
fill="#427C4D"
/>
<Path
d="M55.861 52.12s-3.003 8.886-4.57-2.222c-.13-1.307 1.045-6.142.784-8.103-.261-2.09-1.567-3.79.783-5.358 2.22-1.568 2.22-2.221 3.656-2.613 1.436-.392 3.655.523 4.83.13 1.175-.392 5.484 4.313 3.134 5.75 0 0-2.48-2.613-3.525-.522-.392.784-1.828.261-1.567 1.176 1.567 7.58-2.089 11.761-3.525 11.761Z"
fill="#282828"
/>
<Path
d="M55.992 63.358s11.75-4.574 17.755-9.017c0 0 .914-2.222-.392-3.529-1.305-1.176-15.536.654-18.408 4.052-2.872 3.397-1.436 8.363 1.045 8.494Z"
fill="#759F7E"
/>
<Path
d="M73.356 36.699s.913-1.046.391-1.568c-.522-.523-1.175-1.7-.914-2.875.261-1.176 1.436-3.267 2.22-2.483.783.784.26 2.875.26 3.397 0 .523.523 1.046.393 1.96-.131.915-.653 1.96-.653 1.96l-1.697-.391Z"
fill="#FFAE73"
/>
<Path
d="m73.094 35.392-3.786 15.16 4.44 3.789s1.305-3.92 2.088-9.54c.914-6.011 0-8.364 0-8.364s-1.567-2.744-2.742-1.045Z"
fill="#759F7E"
/>
</G>
</G>
</Svg>
);
Your SVG has a couple of problems. One is that the viewBox is the wrong size for your picture. It is a lot smaller than the SVG contents. But since the SVG mostly displays, I don't think that's your main problem.
Your SVG uses mask-type: alpha masks. It might be that that is the problem. Maybe they are not properly supported on Android. Or perhaps the parsing and rendering of masks is a bit broken in the Android version of react-native-svg.
Things to try:
Those two masks don't need to be type alpha masks. Remove the style="mask-type: alpha" from both masks, and the SVG will still look the same. Maybe they'll also render correctly then.
Try is modifying your SVG to not use masks. One mask just creates the rounded rectangle outline shape of the icon. That could be changed to a clip. The other mask just cuts out the bottom arch from the bus fender. You could remove the mask by modifying the fender shape, and colour.
Related
import * as React from 'react';
import { SvgXml } from 'react-native-svg';
export default function SvgComponent() {
const svgcode = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Iconly/Light-Outline/Profile">
<g id="Profile">
<g id="Group 3">
<mask id="mask0_33437_4900" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="4" y="14" width="16" height="8">
<path id="Clip 2" fill-rule="evenodd" clip-rule="evenodd" d="M4 14.4961H19.8399V21.8701H4V14.4961Z" fill="white"/>
</mask>
<g mask="url(#mask0_33437_4900)">
<path id="Fill 1" fill-rule="evenodd" clip-rule="evenodd" d="M11.9209 15.9961C7.65988 15.9961 5.49988 16.7281 5.49988 18.1731C5.49988 19.6311 7.65988 20.3701 11.9209 20.3701C16.1809 20.3701 18.3399 19.6381 18.3399 18.1931C18.3399 16.7351 16.1809 15.9961 11.9209 15.9961M11.9209 21.8701C9.96188 21.8701 3.99988 21.8701 3.99988 18.1731C3.99988 14.8771 8.52088 14.4961 11.9209 14.4961C13.8799 14.4961 19.8399 14.4961 19.8399 18.1931C19.8399 21.4891 15.3199 21.8701 11.9209 21.8701" fill="black"/>
</g>
</g>
<g id="Group 6">
<mask id="mask1_33437_4900" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="6" y="2" width="12" height="11">
<path id="Clip 5" fill-rule="evenodd" clip-rule="evenodd" d="M6.60986 2.00012H17.2299V12.6187H6.60986V2.00012Z" fill="white"/>
</mask>
<g mask="url(#mask1_33437_4900)">
<path id="Fill 4" fill-rule="evenodd" clip-rule="evenodd" d="M11.9209 3.42776C9.77989 3.42776 8.03789 5.16876 8.03789 7.30976C8.03089 9.44376 9.75989 11.1838 11.8919 11.1918L11.9209 11.9058V11.1918C14.0609 11.1918 15.8019 9.44976 15.8019 7.30976C15.8019 5.16876 14.0609 3.42776 11.9209 3.42776M11.9209 12.6188H11.8889C8.9669 12.6098 6.59989 10.2268 6.60989 7.30676C6.60989 4.38176 8.99189 1.99976 11.9209 1.99976C14.8489 1.99976 17.2299 4.38176 17.2299 7.30976C17.2299 10.2378 14.8489 12.6188 11.9209 12.6188" fill="black"/>
</g>
</g>
</g>
</g>
</svg>
`;
const Svg = () => (
<SvgXml
xml={svgcode}
width='set the width here'
height='set the height here'
/>
);
return <Svg />;
}
I am importing this and using it but the icon is appearing half what's the issue? The SVG is appearing properly in the browser. I have searched a lot but no help. Also tell if there is any other way to use svg in expo app
Not really sure but just a suggestion. Check if you have any other component getting rendered above your SVG.
Why I am guessing this is because since your phone is a relatively smaller device than your browser on a computer, any other component might get squashed thus forcing it to display above your SVG and you might be seeing it as if it's appearing half. On computer screens that might not be the case.
Let me know more about the issue so that I'm more clear about it.
I'm trying to add a shadow to an image clipped by a clippath over SVG, how can it be done in React native?
if my original SVG is shadowed then the image covers it.
My current code:
<svg>
<Defs>
<ClipPath id='clip'>
<Path
d='M113.093,63.183c9.5-23.17,42.313-23.17,51.814,0l97.257,237.195A28,28,0,0,1,236.257,339H41.743a28,28,0,0,1-25.907-38.622Z'
transform='translate(340.5 -12.21) rotate(90)'
scale={scale}
/>
</ClipPath>
</Defs>
<Image
href={{
uri: uri,
}}
clipPath='url(#clip)'
width='100%'
height='100%'
preserveAspectRatio='xMidYMax slice'
/>
</Svg>
Thanks,
Erez
If you apply a shadow to the image and then you clip the image, you also clip the shadow off. In the next example I'm using the path and applying the shadow to the path. Next I'm drawing the image and clip the image.
svg{width:300px;}
<svg viewBox="150 -20 180 160" width="200">
<defs>
<filter id="f">
<feGaussianBlur in="SourceAlpha" stdDeviation="5" result="desenfoque"></feGaussianBlur>
<feOffset in="desenfoque" dx="3" dy="3" result="sombra"></feOffset>
<feMerge>
<feMergeNode in="sombra"></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
<clipPath id='clip'>
<path id="thePath" d='M113.093,63.183c9.5-23.17,42.313-23.17,51.814,0l97.257,237.195A28,28,0,0,1,236.257,339H41.743a28,28,0,0,1-25.907-38.622Z' transform='translate(340.5 -12.21) rotate(90) scale(.5)'/>
</clipPath>
</defs>
<use xlink:href="#thePath" filter="url(#f)" id="use" />
<image x="150" y="-20" xlink:href="https://assets.codepen.io/222579/castell.jpg" clip-path='url(#clip)' width='100%' height='100%' preserveAspectRatio='xMidYMax slice' />
</svg>
UPDATE
The OP is commenting:
I'm using react native with 'react-native-svg' library. this code doesn't seem to work in these circumstances. lacking support of 'feGaussianBlur' and other components
In this case if you have only this shape you can use a css filter to apply a shadow to the svg element:
svg{filter:drop-shadow(2px 2px 5px #000);}
<svg viewBox="150 -20 180 160" width="200">
<defs>
<clipPath id='clip'>
<path id="thePath" d='M113.093,63.183c9.5-23.17,42.313-23.17,51.814,0l97.257,237.195A28,28,0,0,1,236.257,339H41.743a28,28,0,0,1-25.907-38.622Z' transform='translate(340.5 -12.21) rotate(90) scale(.5)'/>
</clipPath>
</defs>
<image x="150" y="-20" xlink:href="https://assets.codepen.io/222579/castell.jpg" clip-path='url(#clip)' width='100%' height='100%' preserveAspectRatio='xMidYMax slice' />
</svg>
I have a Blazor app, it uses Applayout.razor component as a logo.
How can I use my own wwwroot/images/mylogo.png instead of the svg image?
Applayout.razor:
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Group 2">
<g id="flex">
<path id="Combined Shape" fill-rule="evenodd" clip-rule="evenodd"
...
</g>
</g>
</svg>
Any particular reason not to use IMG tag? Something like this <img src="/images/mylogo.png" />
I am trying to use SVG in my react native project. This is the code for my component:
<Svg xmlns="http://www.w3.org/2000/svg" width="100%" height="507" viewBox="0 0 375 507" style={{position:'absolute', bottom:0}}>
<Defs>
<ClipPath id="a">
<Rect class="a" fill='#fff' stroke='#707070' width="375" height="507" transform="translate(0 160)" d="M0 0h375v507H0z"/>
</ClipPath>
<LinearGradient id="b" clipPath='url(#a)' x1="0.5" x2="-0.031" y2="1.477" gradientUnits="objectBoundingBox">
<Stop offset="0" stopColor="rgb(76,209,149)" />
<Stop offset="1" stopColor="rgb(170,221,100)" />
</LinearGradient>
</Defs>
<G class="b" transform="translate(0 -160)">
<Circle class="c" cx="334.249" cy="334.249" r="334.249" transform="translate(-146.354 164.646)" fill='url(#b)' />
</G>
</Svg>
The Output I'm getting is:
https://i.stack.imgur.com/mGaBg.png
I think #enxaneta is right, clip-path seems to not exist on react-native-svg please refer to the documentation, you may find on the docs here react-native-svg #LinearGradient
I think you should have to reference it like this:
<Rect class="a" fill="url(#yourGradientId)" stroke='#707070' width="375" height="507" transform="translate(0 160)" d="M0 0h375v507H0z"/>
where fill should be reference to your gradient id i.e. fill=url(#b)
I've used <Path> to achieve the results below
Note: I have achieve this by using two shapes on top of each other:
A component with background gradient using react-native-linear-gradient
And the LinearGradient from react-native-linear-gradient
Please refer to the codes below.
Code of example above
import Svg, { Path, Defs, LinearGradient, Stop } from 'react-native-svg';
import Gradient from 'react-native-linear-gradient'
const { width, height } = Dimensions.get('window')
<Gradient style={{height: height * .25,}}
colors={ ['#FFD080', 'red'] }
start={{ x: 0, y: 0}}
end={{ x:1, y: 1}}
locations={[0.18, 1, 1]}>
<Svg
height={height * .44}
width={width}
viewBox="0 0 1440 320"
style={{ position: 'relative', top: height * .069 }}
>
<Defs>
<LinearGradient id="path" x1="0" y1="0" x2="1" y2="1">
<Stop offset="0" stopColor="#FFD080" stopOpacity="1" />
<Stop offset="1" stopColor="red" stopOpacity="1" />
</LinearGradient>
</Defs>
<Path fill="url(#path)"
d="M0,96L48,133.3C96,171,192,245,288,229.3C384,213,480,107,576,74.7C672,43,768,85,864,133.3C960,181,1056,235,1152,234.7C1248,235,1344,181,1392,154.7L1440,128L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z"/>
</Svg>
</Gradient>
I found a solution that instead of using the svgs having gradient,I converted the SVG into a Lottie file. that works great and as an extra advantage, we can transform the SVG into a simple animation :)
We would like to blend colors specified at triangle vertices using linear interpolation (e.g. like OpenGL) in a vector graphics file like a pdf.
This example blends red, blue and green:
Is this possible in PDF? If not, then SVG or some other well-supported vector graphics file-format?
It seems gradient meshes are powerful, but can they be degenerated to exactly reproduce linear interpolation?
The pure answer to your question is "no". You can't do three-point gradients in SVG or PDF.
However you can reproduce that image easily enough with a couple of gradients and a mask.
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" viewBox="0 0 100 86.6">
<defs>
<linearGradient id="bluegreen" gradientUnits="objectBoundingBox" x1="0.5" x2="1" y2="1">
<stop offset="0%" stop-color="#0000ff"/>
<stop offset="100%" stop-color="#00ff00"/>
</linearGradient>
<linearGradient id="fader" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="0.75" y2="0.5">
<stop offset="0%" stop-color="white" />
<stop offset="100%" stop-color="black" />
</linearGradient>
<mask id="redmask" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
<path d="M 0.5,0 L 1,1 0,1 Z" fill="url(#fader)" />
</mask>
</defs>
<g>
<path d="M 50,0 L 100,86.6 0,86.6 Z" fill="url(#bluegreen)"/>
<path d="M 50,0 L 100,86.6 0,86.6 Z" fill="#ff0000" mask="url(#redmask)"/>
</g>
</svg>
http://jsfiddle.net/P48FD/
Update: Actually, what was I thinking? :/ You don't need a mask. You can do it just with two linear gradients.
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" viewBox="0 0 100 86.6">
<defs>
<linearGradient id="bluegreen" gradientUnits="objectBoundingBox" x1="0.5" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#0000ff"/>
<stop offset="100%" stop-color="#00ff00"/>
</linearGradient>
<linearGradient id="redfade" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="0.75" y2="0.5">
<stop offset="0%" stop-color="#ff0000" />
<stop offset="100%" stop-color="#ff0000" stop-opacity="0" />
</linearGradient>
</defs>
<g>
<path d="M 50,0 L 100,86.6 0,86.6 Z" fill="url(#bluegreen)"/>
<path d="M 50,0 L 100,86.6 0,86.6 Z" fill="url(#redfade)"/>
</g>
</svg>
http://jsfiddle.net/Q3qjB/