Related
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.
<template>
<div>
<!-- desktop-->
<svg v-if="name === 'desktop'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path
d="M13 17h-2v2h2v-2zm2 0v2h2a1 1 0 0 1 0 2H7a1 1 0 0 1 0-2h2v-2H4a2 2 0 0 1-2-2V5c0-1.1.9-2 2-2h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-5zM4 5v10h16V5H4z"
/>
</svg>
<svg v-if="name === 'draggable-handle'" width="11" height="16" viewBox="0 0 11 16" xmlns="http://www.w3.org/2000/svg">
<circle cx="2.22798" cy="1.45455" r="1.45455" />
<circle cx="8.77486" cy="1.45455" r="1.45455" />
<circle cx="2.22798" cy="14.5454" r="1.45455" />
<circle cx="8.77486" cy="14.5454" r="1.45455" />
<circle cx="2.22798" cy="8.00044" r="1.45455" />
<circle cx="8.77486" cy="8.00044" r="1.45455" />
</svg>
hi all, basically I have a component called SIcon.vue that has a bunch of svg's hardcoded and different name attributes so I can use different ones. What I'm currently trying to do is to pass a class string back to my component. For example here, If I do
<SIcon name="desktop" class="h-10 w-10" />
The svg for desktop should render with the class "h-10 w-10". I need this because I am using tailwindcss and I have to pass back the string exactly. I tried v-bind and adding a class props but it still requires an attribute. Any help would be appreciated
In SIcon.vue, you could start by adding a prop:
props: ['propClass'],
Bind propClass to the svg class:
<svg :class="propClass" ..>
In your parent component:
<SIcon name="desktop" propClass="h-10 w-10" />
And that should bind directly to the SVG
Despite the solution of #procoib using props your solution is almost the better way to go for your example. Instead of using props you could also use $attrs. $attrs allows you to access any class attributes passed from the parent to the child and simply attach those classes to any node within your child.
Your code could somewhat look like this.
<template>
<div>
<!-- desktop-->
<svg
v-if="name === 'desktop'"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="24"
height="24"
v-bind="$attrs"
>
<path d="M13 17h-2v2h2v-2zm2 0v2h2a1 1 0 0 1 0 2H7a1 1 0 0 1 0-2h2v-2H4a2 2 0 0 1-2-2V5c0-1.1.9-2 2-2h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-5zM4 5v10h16V5H4z" />
</svg>
<svg
v-if="name === 'draggable-handle'"
width="11"
height="16"
viewBox="0 0 11 16"
xmlns="http://www.w3.org/2000/svg"
v-bind="$attrs"
>
<circle cx="2.22798" cy="1.45455" r="1.45455" />
<circle cx="8.77486" cy="1.45455" r="1.45455" />
<circle cx="2.22798" cy="14.5454" r="1.45455" />
<circle cx="8.77486" cy="14.5454" r="1.45455" />
<circle cx="2.22798" cy="8.00044" r="1.45455" />
<circle cx="8.77486" cy="8.00044" r="1.45455" />
</svg>
</div>
</template>
I tried the lib react-native-svg-uri to show my gradient SVG but its background was black in screen as attached picture.
Anything is wrong with my code below while I follow guide in this link: https://www.npmjs.com/package/react-native-svg
const iconSvg = require('../images/home_option2/bao_cao.svg')
<SvgUri height={96} width={96} source={iconSvg}/>
Here is SVG code:
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
<defs>
<linearGradient id="a" x1="50%" x2="50%" y1="0%" y2="100%">
<stop offset="0%" stop-color="#68B9FE"/>
<stop offset="100%" stop-color="#627CFF"/>
</linearGradient>
</defs>
<g fill="none" fill-rule="evenodd">
<rect width="48" height="48" fill="url(#a)" rx="24"/>
<path fill="#FFF" d="M17.02 14.692v17.03c0 .406-.334.74-.741.74a.743.743 0 0 1-.74-.74V16.384h-.847A1.69 1.69 0 0 0 13 18.077v15.23A1.69 1.69 0 0 0 14.692 35h18.674c.899 0 1.634-.73 1.634-1.634V14.692A1.69 1.69 0 0 0 33.308 13l-14.702.106c-.936 0-1.587.65-1.587 1.586zm3.49 1.693h4.442c.407 0 .74.333.74.74s-.333.74-.74.74H20.51a.743.743 0 0 1-.74-.74c0-.407.332-.74.74-.74zm0 8.461h7.827c.407 0 .74.333.74.74 0 .408-.333.74-.74.74H20.51a.743.743 0 0 1-.74-.74c0-.407.332-.74.74-.74zm10.365 5.712H20.51a.743.743 0 0 1-.74-.74c0-.408.332-.741.74-.741h10.365c.407 0 .74.333.74.74 0 .408-.333.74-.74.74zm0-8.462H20.51a.743.743 0 0 1-.74-.74c0-.407.332-.74.74-.74h10.365c.407 0 .74.333.74.74s-.333.74-.74.74z"/>
</g>
</svg>
Anyone can help, please!
The problem lies in your .svg file. You are probably using an older svg standard. I transformed your .svg file and with the new one it works.
New SVG:
<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><g><path d="M48,24c0,-13.246 -10.754,-24 -24,-24c-13.246,0 -24,10.754 -24,24c0,13.246 10.754,24 24,24c13.246,0 24,-10.754 24,-24Z" style="fill:url(#_Linear1);"/><path d="M17.02,14.692l0,17.03c0,0.406 -0.334,0.74 -0.741,0.74c-0.405,-0.002 -0.738,-0.335 -0.74,-0.74l0,-15.338l-0.847,0c-0.001,0 -0.001,0 -0.002,0c-0.927,0 -1.69,0.763 -1.69,1.69c0,0.001 0,0.002 0,0.003l0,15.23c0,0.001 0,0.002 0,0.003c0,0.927 0.763,1.69 1.69,1.69c0.001,0 0.001,0 0.002,0l18.674,0c0.899,0 1.634,-0.73 1.634,-1.634l0,-18.674c0,-0.001 0,-0.001 0,-0.002c0,-0.927 -0.763,-1.69 -1.69,-1.69c-0.001,0 -0.001,0 -0.002,0l-14.702,0.106c-0.936,0 -1.587,0.65 -1.587,1.586l0.001,0Zm3.49,1.693l4.442,0c0.407,0 0.74,0.333 0.74,0.74c0,0.407 -0.333,0.74 -0.74,0.74l-4.442,0c-0.405,-0.002 -0.738,-0.335 -0.74,-0.74c0,-0.407 0.332,-0.74 0.74,-0.74Zm0,8.461l7.827,0c0.407,0 0.74,0.333 0.74,0.74c0,0.408 -0.333,0.74 -0.74,0.74l-7.827,0c-0.405,-0.002 -0.738,-0.335 -0.74,-0.74c0,-0.407 0.332,-0.74 0.74,-0.74Zm10.365,5.712l-10.365,0c-0.405,-0.002 -0.738,-0.335 -0.74,-0.74c0,-0.408 0.332,-0.741 0.74,-0.741l10.365,0c0.407,0 0.74,0.333 0.74,0.74c0,0.408 -0.333,0.74 -0.74,0.74l0,0.001Zm0,-8.462l-10.365,0c-0.405,-0.002 -0.738,-0.335 -0.74,-0.74c0,-0.407 0.332,-0.74 0.74,-0.74l10.365,0c0.407,0 0.74,0.333 0.74,0.74c0,0.407 -0.333,0.74 -0.74,0.74Z" style="fill:#fff;"/></g><defs><linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(2.93915e-15,48,-48,2.93915e-15,24,0)"><stop offset="0" style="stop-color:#68b9fe;stop-opacity:1"/><stop offset="1" style="stop-color:#627cff;stop-opacity:1"/></linearGradient></defs></svg>
Demo:
import SvgUri from 'react-native-svg-uri';
import img from './test2.svg'; // import .svg file
<SvgUri
width="200"
height="200"
source={img}
/>
Result:
I see this post: https://stackoverflow.com/a/48245827/9775054
That was extracted from here, where says react-native-svg-uri.
But I can't make it work... I did all steps, but always says me that "Path './test.svg' could not be found.". I don't understand why, because the path to the file is correct for sure.
I installed correctly react-native-svg, react-native-svg-uri, babel-plugin-inline-import and I have put the config on .babelrc.
.babelrc config:
{
"presets": ["module:metro-react-native-babel-preset"],
"plugins": [
["babel-plugin-inline-import", {
"extensions": [
".svg"
]
}]
]
}
Using the SVG File:
import * as React from 'react';
import SvgUri from 'react-native-svg-uri';
import testSvg from './test.svg';
export default () => (
<SvgUri
width="200"
height="200"
svgXmlData={testSvg}
/>
);
SVG File example
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 96 96" style="enable-background:new 0 0 96 96;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
.st1{fill:#222FFF;}
</style>
<path class="st0" d="M48,96c26.5,0,48-21.5,48-48S74.5,0,48,0S0,21.5,0,48S21.5,96,48,96"/>
<path class="st0" d="M48,95c26,0,47-21,47-47S74,1,48,1S1,22,1,48S22,95,48,95"/>
<g>
<g id="Navigation">
<g>
<path class="st1" d="M24,30.9h48.6c1.8,0,3.2-1.5,3.2-3.3c0-1.8-1.4-3.3-3.2-3.3H24c-1.8,0-3.2,1.5-3.2,3.3
C20.8,29.4,22.2,30.9,24,30.9z M72.6,44.3H24c-1.8,0-3.2,1.5-3.2,3.3c0,1.8,1.4,3.3,3.2,3.3h48.6c1.8,0,3.2-1.5,3.2-3.3
C75.8,45.7,74.3,44.3,72.6,44.3z M72.6,64.2H24c-1.8,0-3.2,1.5-3.2,3.3c0,1.8,1.4,3.3,3.2,3.3h48.6c1.8,0,3.2-1.5,3.2-3.3
C75.8,65.6,74.3,64.2,72.6,64.2z"/>
</g>
</g>
</g>
</svg>
Other details
React Native verison: 0.57.8
Targeting Android 8.0
Someone could help me please?
I have an svg icon uploaded on fontello
if is being displayed perfectly on ios
but on android there are a lot of spaces
any idea why?
this is my svg file
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 71.8 73.9" style="enable-background:new 0 0 71.8 73.9;" xml:space="preserve">
<g>
<g>
<path d="M38.1,36V2.1C38.1,0.9,37.1,0,36,0c-1.2,0-2.1,0.9-2.1,2.1V36c-4.8,1-8.5,5.2-8.5,10.3s3.6,9.4,8.5,10.3v15.1
c0,1.2,0.9,2.1,2.1,2.1c1.2,0,2.1-0.9,2.1-2.1V56.7c4.8-1,8.5-5.2,8.5-10.3C46.5,41.3,42.9,37,38.1,36z M36,52.7
c-3.5,0-6.4-2.9-6.4-6.4c0-3.5,2.9-6.4,6.4-6.4c3.5,0,6.4,2.9,6.4,6.4C42.4,49.9,39.5,52.7,36,52.7z"/>
<path d="M12.6,18.6V2.1c0-1.2-0.9-2.1-2.1-2.1S8.5,0.9,8.5,2.1v16.5C3.6,19.6,0,23.8,0,28.9s3.6,9.4,8.5,10.3v32.5
c0,1.2,0.9,2.1,2.1,2.1s2.1-0.9,2.1-2.1V39.3c4.8-1,8.5-5.2,8.5-10.3S17.4,19.6,12.6,18.6z M10.5,35.3c-3.5,0-6.4-2.9-6.4-6.4
c0-3.5,2.9-6.4,6.4-6.4s6.4,2.9,6.4,6.4C16.9,32.5,14,35.3,10.5,35.3z"/>
<path d="M63.3,18.6V2.1c0-1.2-0.9-2.1-2.1-2.1c-1.2,0-2.1,0.9-2.1,2.1v16.5c-4.8,1-8.5,5.2-8.5,10.3s3.6,9.4,8.5,10.3v32.5
c0,1.2,0.9,2.1,2.1,2.1c1.2,0,2.1-0.9,2.1-2.1V39.3c4.8-1,8.5-5.2,8.5-10.3S68.2,19.6,63.3,18.6z M61.3,35.3
c-3.5,0-6.4-2.9-6.4-6.4c0-3.5,2.9-6.4,6.4-6.4c3.5,0,6.4,2.9,6.4,6.4C67.6,32.5,64.8,35.3,61.3,35.3z"/>
</g>
</g>
</svg>
Add <svg width="71.8" height="73.9" props (or any other value keeping the same ratio).