I am new to selenium Java writing xpath for my project,unable to locate elements in this tag
<svg class=“MuiSvgIcon-root” focusable=“false” viewBox=“0 0 24 24” aria-hidden=‘true’>
//[name()=‘svg’] and I am getting 36 values
My following svg file nicely displays the image (shown below) with 512x512 size. I want to convert it to a 32x32 size. But when I change the width and height attributes to 32x32 in the first line of the below file, the image does not even display. If I change it to, say, 100x100, only a portion of the image is displayed. Question: How can I generate a 32x32 size svg image from the following svg file. Or, if this is not possible, is there any other way of generating the image (shown below) as an svg file with size of 32x32?
MySvgFile.svg:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="512" height="512"><path d="M507.712 311.74c-7.903 0-13.493-0.757-16.772-2.27s-6.599-4.456-9.962-8.827l-62.298-89.284 39.85-57.757c3.363-4.54 7.945-8.66 13.746-12.358s15.343-5.549 28.627-5.549v-8.828h-68.855v8.828c5.549 0 9.878 1.387 12.989 4.161s4.666 5.843 4.666 9.206c0 1.177-0.084 2.312-0.252 3.405s-0.841 2.228-2.018 3.405l-33.293 48.93-37.832-55.74-1.135-1.387c0 0-0.378-0.967-1.135-2.9 0-2.354 1.598-4.456 4.792-6.305s7.567-2.774 13.115-2.774v-8.828h-80.205v8.828h4.54c7.735 0 13.536 0.673 17.403 2.018s6.894 3.699 9.080 7.062l53.47 79.952-46.66 69.108c-2.186 3.363-6.18 7.188-11.981 11.476s-15.932 6.432-30.392 6.432v8.827h16.413c-3.319 17.739-7.947 31.114-13.892 40.103-6.894 10.425-22.531 15.637-46.913 15.637h-37.833c-6.726 0-10.635-0.757-11.728-2.27s-1.639-4.456-1.639-8.827v-75.917h24.465c13.284 0 21.774 2.522 25.474 7.567s5.549 13.704 5.549 25.978h6.81v-75.665h-6.81c0 12.274-1.555 20.892-4.666 25.852s-11.896 7.44-26.357 7.44h-24.465v-69.108c0-4.372 0.547-7.315 1.639-8.827s5.002-2.27 11.728-2.27h35.563c22.195 0 36.445 4.287 42.75 12.863s10.635 22.868 12.989 42.877h6.558l-8.827-64.567h-129.294l-4.381-62.298h-175.795l-4.54 64.567h6.558c2.354-23.372 6.222-38.505 11.602-45.399s18.664-10.341 39.85-10.341h15.386c3.363 0 5.338 1.009 5.927 3.026s0.883 4.708 0.883 8.071v149.313c0 4.372-1.219 7.692-3.657 9.962s-10.888 3.405-25.348 3.405h-13.367v8.827h106.94v-8.827h-9.080c-14.46 0-22.868-1.135-25.221-3.405s-3.531-5.591-3.531-9.962v-149.313c0-3.363 0.168-5.759 0.504-7.188s1.597-2.732 3.784-3.91h15.638c21.186 0 34.469 3.447 39.85 10.341 5.202 6.666 8.907 21.058 11.123 43.129h-21.968v8.827h6.558c11.266 0 17.823 0.841 19.673 2.522s2.774 5.297 2.774 10.845v149.313c0 5.549-0.925 9.164-2.774 10.846s-8.407 2.522-19.673 2.522h-6.558v8.827h164.697l9.763-64.567h48.247v-8.827c-6.726 0-11.392-1.682-13.998-5.045s-3.909-6.137-3.909-8.323c0-1.177 0.084-2.312 0.252-3.405s0.841-2.228 2.017-3.405l40.103-60.028 44.39 69.107c0 1.009 0.378 1.598 1.135 1.765l1.135 0.252c0 2.354-1.555 4.456-4.666 6.305s-7.44 2.774-12.989 2.774v8.827h79.952v-8.827h-4.288z"></path></svg>
Image display of the above svg file:
Here is a codepen on how to do it, to add to my comment, viewBox does it all here. :)
https://codepen.io/kissu-the-styleful/pen/yLaQwOq
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
EDIT: Great website to understand viewBox a bit more !
https://wattenberger.com/guide/scaling-svg
I am using this NPM package #eastsideco/polaris-vue from here. Its basically a way to use Shopify's Polaris framework but instead of React you can use Vue.js. Which is what I want.
One issue I'm having is the Shopify Icons. Here in the example page they are using this long string of characters instead of the SVG icon. See this:
icon: '<svg class="Polaris-Icon__Svg" viewBox="0 0 20 20"><path d="M13.707 10.707a.997.997 0 0 1-1.414 0L11 9.414V17a1 1 0 1 1-2 0V9.414l-1.293 1.293a.999.999 0 1 1-1.414-1.414l3-3a.999.999 0 0 1 1.414 0l3 3a.999.999 0 0 1 0 1.414zM17 2a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1h-3a1 1 0 1 1 0-2h2V4H4v9h2a1 1 0 1 1 0 2H3a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h14z" fill-rule="evenodd"></path></svg>'
And that totally works! I was able to also use it in my pages. I have no clue what that string is or where it comes from. So my question is how can I get that for other icons? For example this cart Icon from the Shopify Icon explorer page.
I open the web console and see something but its not the same as above. How in the world can I translate the icons I see to the string above?
It's not a random string but a regular svg. All special characters like <>" are replaced with HTML entities.
An HTML entity is a piece of text ("string") that begins with an ampersand (&) and ends with a semicolon (;) . Entities are frequently used to display reserved characters (which would otherwise be interpreted as HTML code), and invisible characters (like non-breaking spaces). You can also use them in place of other characters that are difficult to type with a standard keyboard.
Reference: https://developer.mozilla.org/en-US/docs/Glossary/Entity
Here is a list of the entities in provided svg:
< = <
" = "
>= >
To replace it in any svg just use "find and replace" in your code editor, it's the easiest way.
In case you need more entities here is full list: https://dev.w3.org/html5/html-author/charref
I have created a sad image for 404 error redirect
<svg width="134" height="134" viewBox="0 0 134 134" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" fill="#000" d="M1 67.388c.019 36.919 29.394 66.243 66.32 66.208 36.871-.035 66.285-29.472 66.272-66.322C133.58 30.515 103.994.979 67.208 1 30.383 1.021.981 30.503 1 67.388zm40.332 19.774c-.001-5.624 1.68-5.857 6.035-5.941 4.615-.091 5.879 1.391 5.885 5.941.005 4.635-1.426 5.956-5.988 5.954-4.646-.002-5.932-.632-5.932-5.954zm5.683-46.129c4.745 0 6.41.813 6.222 5.768-.159 4.2-.727 6.398-5.692 6.235-4.257-.139-6.411-.852-6.1-5.772.252-3.983 0-6.505 5.57-6.23zm42.203-7.042s3.979 3.479 5.616 5.05c-21.936 22.036-13.345 44.103-.445 57.111.001 0-2.744 3.34-4.633 4.948-17.013-11.334-24.77-47.625-.538-67.109z"/></svg>
Change some numbers from negative to positive
I managed to make the smile smile, but there are small imperfections, the circle is not well formed, the eyes and his smile.
<svg width="134" height="134" viewBox="0 0 134 134" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" fill="#000" stroke-linejoin="round" d="
M1 67.388
c.019 36.919 29.394 66.243 66.32 66.208
c36.871-.035 66.285-29.472 66.272-66.322
C133.58 30.515 103.99 4.979 67.208 1
C30.383 1.02 1.981 30.503 1 67.388z
m40.332 19.774
c-.001-5.624 1.68-5.857 6.035-5.941
c4.615-.091 5.879 1.391 5.885 5.94
c1.005 4.635 -1.426 5.956 -5.988 5.954
c-4.646 -.002 -5.932-.632 -5.932-5.954z
m5.683-46.129
c4.745 0 6.4 1.813 6.222 5.768
c-.159 4.2 -.727 6.398 -5.692 6.235
c-4.257-.139 -6.411-.852 -6.1-5.77
c2.252-3.983 0-6.505 5.57-6.23z
m42.203-7.042
s3.979 3.479 5.616 5.05
c 21.936 22.036 13.345 44.103 .445 57.11
c1.001 0 2.744 3.34 4.633 4.948
c 17.013-11.334 24.77-47.625-.538-67.109z"/></svg>
How do I solve it correctly?
Why don't you just grab a royalty-free one from the web? eg. https://en.m.wikipedia.org/wiki/File:Happy_face.svg
<svg height="1000" width="977" xmlns="http://www.w3.org/2000/svg">
<path d="M0 841.743l185.535 -185.535l1.953 0q-66.402 -105.462 -66.402 -228.501 0 -177.723 124.992 -302.715t302.715 -124.992 302.715 124.992 124.992 302.715 -124.992 302.715 -302.715 124.992q-105.462 0 -197.253 -48.825l-193.347 193.347zm310.527 -415.012q0 98.627 70.308 167.958t167.958 69.332 167.958 -69.332 70.308 -167.958 -70.308 -167.958 -167.958 -69.332 -167.958 69.332 -70.308 167.958z"/>
</svg>
This svg will generate a search icon. It is written on the basis of 1000 hight and 977 width. If I change the width and the height it crops it and does not resize it. I would like to see a mathematical way or any tool online that can help me edit the code and resize it. I am using this on an HTML page and I know that I can just use css to resize it. However, I do not want to do that. I want to fix the svg file itself and resize it internally. Anyone has any idea on how to do that?
It's very simple.
Convert the width and height attributes to a viewBox. A viewBox will, for your purposes, take the form:
"0 0 <width> <height>"
so in this case it will become:
"0 0 977 1000"
Then set the width and height to appropriate values for the size icon you want. You will normally want them to keep the same ratio as the original values.
<svg width="97.7" height="100" viewBox="0 0 977 1000" xmlns="http://www.w3.org/2000/svg">
<path d="M0 841.743l185.535 -185.535l1.953 0q-66.402 -105.462 -66.402 -228.501 0 -177.723 124.992 -302.715t302.715 -124.992 302.715 124.992 124.992 302.715 -124.992 302.715 -302.715 124.992q-105.462 0 -197.253 -48.825l-193.347 193.347zm310.527 -415.012q0 98.627 70.308 167.958t167.958 69.332 167.958 -69.332 70.308 -167.958 -70.308 -167.958 -167.958 -69.332 -167.958 69.332 -70.308 167.958z"/>
</svg>
If you just want a free solution to reliably scale or make any other alterations to an SVG graphic, have you considered free and open-source Inkscape?
From its Debian package description:
Most of the common vector formats are supported, including PDF, Adobe
Illustrator and AutoCAD files, and it has unrivaled support for the
SVG web graphics standard.
Install
Available on Mac, Linux, Windows.
For Windows, you can try Inkscape Portable if you like portable apps.
On Linux, for example Debian-based distributions, you can:
$ sudo apt-get install inkscape
Inkscape
Using a text editor, save the SVG code you posted, to a file, name it for example graphic.svg.
Start Inkscape.
Ctrl+O to see the Open dialog
Browse and open graphic.svg.
Observe: In your case, your graphic resembles a black and white magnifying glass.
Click once on the graphic to select it.
Observe: Inkscape handlebars indicate you have selected the graphic.
Ctrl-shift-m to open Transform panel.
Scale tab.
It currently says:
Width: 976.500
Height: 999.936
Change unit drop-down to px.
Check mark Scale proportionally.
Let's say you want the width to be approximately 200 pixels wide:
Width: 200
Press tab to exit the Width entry.
Observe: due to Scale proportionally, the height: has automatically been re-calculated and updated to a new value 205.824
Apply.
Close the Transform panel.
Observe: it appears smaller than the canvas.
Ctrl-shift-d to open Document Properties.
Observe: it currently says:
Width: 977
Height: 1000.00
click Resize page to content
click Resize page to drawing or selection
Observe: it now says:
Width: 201.00
Height: 205.82
Close the Document Properties dialog.
Ctrl-shift-s to get Save As dialog.
name: graphic2.png
Bottom right drop-down menu,
Change Inkscape SVG (*.svg) to Plain SVG (*.svg).
Save
So now you have succesfully created a smaller version of your original graphic.
Reasons
Plain SVG (*.svg) is slightly smaller than the default Inkscape SVG (*.svg). 1.2K vs 2.1K
Further tweaks
If you look at the sizes:
graphic.svg 472b
graphic2.svg 1.2K
If minimizing file size is important to you, or for some reason you wish to eliminate all the additional meta tags that Inkscape provides, you can always use a text editor to assemble a final, smaller file, for example name it graphic3.svg.
For its opening SVG tag, borrow from your original code, but alter the width and height appropriately to the newer values. We saw earlier in Inkscape's Document Properties that the canvas was re-sized to:
Width: 201.00
Height: 205.82
So adapt this to the SVG attributes:
<svg height="206" width="201" xmlns="http://www.w3.org/2000/svg">
From graphic2.png, copy the <path ... > code.
End the file with a close SVG tag:
</svg>
Save, and now your new graphic3.png is about as small as your original graphic.svg
javascript:
function scaleSvgString(str, multiplicator){
var result_string="";
var current_number="";
for (var i = 0, len = str.length; i < len; i++) {
//means "is a number or a decimal separator"
if( (str[i].charCodeAt()>=48 && str[i].charCodeAt()<=57) || str[i].charCodeAt()==46){
current_number+=""+str[i];
}else{
if(current_number.length>0){
var scaled_number=Number(current_number)*multiplicator;
result_string+=""+scaled_number;
//reset number buffer
current_number="";
}
result_string+=""+str[i];
}
}
return result_string;
}
call it like
scaleSvgString("<svg> ... </svg>", 0.5);
i haven't actually tested it, i hope it works lol
You can do it dynamically with JavaScript.
The working code in the snippet below requires that you add an id to the svg path (or rect or g or whatever) that you want to just fill your desired area. You also have to change the desired width and height to whatever you want.
Pros:
You can re-use this routine for any shapes and any sizes you want.
All calculations are done for you.
You don't have to worry about aspect ratios, i.e. relative dimensions.
You don't have to do anything to the svg code (other than potentially adding an id to the target shape, as described above) for any image coming out of your favourite drawing program or downloaded from online.
You can re-use the same image with no internal modifications in different locations in your code, with each potentially being a different desired size.
You could potentially make a single svg file (e.g. allMyIconsInOnePlace.svg) containing multiple images you want used in different places, and then just use the code to target one particular shape for one particular use by changing the shpId in the code.
Cons:
Your stored svg code will be a little mis-leading, as the saved version won't contain the true information about its scaling which will only be determined at run-time.
This code will have to be included and run every time you want to use the image this way.
The only way to see the actual structure of the modified svg element would be at run-time, e.g., by using 'inspect element' in a browser debugger.
var shpId = "myShape";
var desiredWdth = 100;
var desiredHght = 60;
var shp = document.getElementById(shpId);
var svg = shp.ownerSVGElement;
var shpBBox = shp.getBBox();
var viewBoxStr =
shpBBox.x + " " +
shpBBox.y + " " +
shpBBox.width + " " +
shpBBox.height;
svg.setAttribute("viewBox", viewBoxStr);
svg.width .baseVal.value = desiredWdth;
svg.height.baseVal.value = desiredHght;
<svg height="1000" width="977" xmlns="http://www.w3.org/2000/svg">
<path id="myShape" d="M0 841.743l185.535 -185.535l1.953 0q-66.402 -105.462 -66.402 -228.501 0 -177.723 124.992 -302.715t302.715 -124.992 302.715 124.992 124.992 302.715 -124.992 302.715 -302.715 124.992q-105.462 0 -197.253 -48.825l-193.347 193.347zm310.527 -415.012q0 98.627 70.308 167.958t167.958 69.332 167.958 -69.332 70.308 -167.958 -70.308 -167.958 -167.958 -69.332 -167.958 69.332 -70.308 167.958z"/>
</svg>