Svg icon displays differently on ios and android - react-native

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).

Related

Svg Icon in expo react native appearing half or only a part of the icon

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.

How to replace svg with png?

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" />

How to make an Ionic v4 custom tab icon change color when active?

I can get the custom icon to show up on the tab. However, it doesn't change color when you click it. The tab icon should go from the inactive gray to the active blue.
Tabs.html
<ion-tab-button tab="topics">
<ion-icon src="/assets/simple-path.svg"></ion-icon>
</ion-tab-button>
A simple svg
<svg width="39" height="45" viewBox="0 0 39 45" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 35L15 0.5L39 15.5L25 45L0 35Z" fill="#C4C4C4"/>
</svg>
tabs.scss
path {
--color: gray;
--color-selected: blue;
}

I was stuck on this for awhile. It turns out you need to remove the fill attributes from the svg like this:
<svg width="39" height="45" viewBox="0 0 39 45" xmlns="http://www.w3.org/2000/svg">
<path d="M0 35L15 0.5L39 15.5L25 45L0 35Z"/>
</svg>

How to center element inside SVG polygon

I have SVG that is assembled from multiple polygons.
I am trying to put image/button inside polygon center but what ever I try it always put image in x=0 and y=0 of the screen.
<Svg width="546px" height="794px" viewBox="0 0 546 794" version="1.1" >
<G id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<G id="item0" transform="translate(1.000000, 1.000000)" fill="#EDAF51" fill-rule="nonzero" stroke="#720D00">
<Polygon id="RX-03" points="206.65269...">
</Polygon>
<Circle x="0" y="0" cx="40" cy="40" r="15" fill="black" />
</G>
With this I get:
But if I put <Circle x="110" y="0" I get
And this is correct but I don't want to use x=110 I am trying to make this circle to be relative to it's parent polygon.
So I can set circle to x=0 y=0 and to keep it inside area of parent polygon.

New answer on the comment of the author of the question
In svg, with mutual positioning between elements, there is only absolute positioning.
Relative positioning in svg, as you want - there is no circle relative to the parent polygon.
Only absolute positioning of a circle will help to place it in the right place
You can create a circle once and clone it several times while positioning:
<use xlink:href="#crc1" x="100" y="150" />
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="546px" height="794px" viewBox="0 0 546 794" >
<defs>
<circle id="crc1" cx="0" cy="0" r="15" stroke="red" />
</defs>
<image transform="translate(0, -300)" xlink:href="https://i.stack.imgur.com/q0PXl.png"
width="100%" height="100%"
/>
<use xlink:href="#crc1" x="100" y="150" />
<use xlink:href="#crc1" x="210" y="110" />
<use xlink:href="#crc1" x="300" y="190" />
<use xlink:href="#crc1" x="385" y="190" />
<use xlink:href="#crc1" x="500" y="190" />
</svg>
</div>

An image can be inserted into any SVG shape in several ways:
Using clipPath
Using mask
Using pattern
With any method of inserting an image, you need to focus on the shape of the template.
If the template has a symmetrical shape, it is necessary to select the original image with the same aspect ratio.
In other words, if the cropping pattern is a circle or regular polygons, then you need to select images with the same width and height.
I translated the React syntax into the regular SVG syntax. If necessary, you can go back
Selected round image badge
Insert this image into the hexagon`
1. Using clipPath
The hexagon acts as a cropping pattern.
<style>
.container {
width:50%;
height:50%;
}
</style>
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 546 794" >
<defs>
<clipPath id="clip">
<path fill="none" stroke="none" stroke-width="2" d="m275.9 190.9 175.6 101.4 0 202.7-175.6 101.4-175.6-101.4 0-202.7z" />
</clipPath>
</defs>
<image xlink:href="https://i.stack.imgur.com/gOrJU.png"
x="0"y="0"
width="100%" height="100%"
clip-path="url(#clip)" />
</svg>
</div>
2. Using mask
.container {
width:50%;
height:50%;
}
image {
mask:url(#msk1);
}
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 546 794" >
<defs>
<mask id="msk1">
<path fill="white" stroke="red" stroke-width="12" d="m275.9 190.9 175.6 101.4 0 202.7-175.6 101.4-175.6-101.4 0-202.7z" />
</mask>
</defs>
<image xlink:href="https://i.stack.imgur.com/gOrJU.png" x="0" y="0" width="100%" height="100%" />
</svg>
</div>
3. Using pattern
.container {
width:50%;
height:50%;
}
path {
fill:url(#ptn1);
stroke:#DBC176;
stroke-width:8;
}
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 546 794" >
<defs>
<pattern id="ptn1" width="1" height="1">
<image xlink:href="https://i.stack.imgur.com/gOrJU.png" x="-24" y="3" width="400px" height="400px" />
</pattern>
</defs>
<path d="m275.9 190.9 175.6 101.4 0 202.7-175.6 101.4-175.6-101.4 0-202.7z" />
</svg>
</div>

How to show gradient SVG image in React Native

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: