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" />
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.
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.
Scenario:
I have something similar
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<!-- Using g to inherit presentation attributes -->
<g fill="white" stroke="green" stroke-width="5">
<circle cx="40" cy="40" r="25" />
<circle cx="60" cy="60" r="25" />
</g>
</svg>
Hovering over svg will show a tooltip and I need to test whether tooltip is displayed and the content is correct.
Any suggestions? Tried trigger(mouseover) which in not working
cy.get(svg).trigger('focus')
worked for me
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>
I need to clicking on this icon to perform few edit functions. However, my code is unable to locate this icon. Can somebody help with the correct locators for this snippet?
<td _ngcontent-c29="" class="custom-td-action mat-cell cdk-column-action mat-column-action ng-star-inserted" mat-cell="" role="gridcell">
<button _ngcontent-c29="" aria-haspopup="true" mat-icon-button="" class="mat-icon-button">
<span class="mat-button-wrapper">
<mat-icon _ngcontent-c29="" class="inv-icon-size--small mat-icon mat-icon-no-color" role="img" svgicon="inv-ellipsis-h" aria-hidden="true">
<svg width="100%" height="100%" viewBox="0 0 17 3" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fit="" preserveAspectRatio="xMidYMid meet" focusable="false">
<!-- Generator: sketchtool 51.3 (57544) - http://www.bohemiancoding.com/sketch -->
<title>E1FE60C0-EF43-4EE7-AF32-E28F60D7C746#1,5x</title>
<desc>Created with sketchtool.</desc>
<defs></defs>
<g id="UX-DESIGNER" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="ui-03list_02--spec--product-type" transform="translate(-1493.000000, -589.000000)"
fill="#333333">
<g id="list/product-type-copy-2" transform="translate(255.000000, 547.000000)">
<g id="Group-10" transform="translate(185.000000, 18.000000)">
<g id="package/list">
<g id="ico/options" transform="translate(1053.000000, 24.000000)">
<g id="Group-4">
<circle id="Oval" cx="1.5" cy="1.5" r="1.5"></circle>
<circle id="Oval-Copy" cx="8.5" cy="1.5" r="1.5"></circle>
<circle id="Oval-Copy-2" cx="15.5" cy="1.5" r="1.5"></circle>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
</mat-icon>
</span>
<div class="mat-button-ripple mat-ripple mat-button-ripple-round" matripple=""></div>
<div class="mat-button-focus-overlay"></div>
</button>
<mat-menu _ngcontent-c29="" xposition="before" class="ng-tns-c9-43">
<!---->
</mat-menu>
</td>
Unable to click on svg icon for edit functions.
try following xpath:
//button[#class='mat-icon-button']//mat-icon/*[name()='svg']