Is there any such thing as a code magnifier so that I can zoom in on a code as I’m changing pixel sizes?
not really sure what you are asking but in Firefox if you right click you can ‘inspect element’ which opens a panel showing the html and associated CSS. You can modify both as much as you want and get a realtime look at how you change affects the page. It doesn’t save anything though so be sure to copy out any css etc if you want to add it to the actual stylesheet you are using.
hth
Just for changing pixel sizes of an svg, wanted to get it to look exactly the same.
Hi there asasass,
Notepad++ already has this facility. 
Click the “View” tab followed by “Zoom”.
coothead
I was looking for an open source online one.
I was trying to get this to look exactly the same
<svg viewBox="-800 -700 2452 3383" style="
width: 64px;
height: 64px;
background-color: rgba(0,0,0,.7);
background-repeat: no-repeat;
background-size: 24px;
background-position: 58% 50%;
border-radius: 500px;
border: 1px solid red;
cursor: pointer;
">
<path d="M0 1394V87C0 46.3 13.3 19.8 40 7.5 66.7-4.8 98.7.3 136 23l1034 634c37.3 22.7 56 50.3 56 83s-18.7 60.3-56 83L136 1458c-37.3 22.7-69.3 27.8-96 15.5-26.7-12.3-40-38.8-40-79.5z" fill="white"/>
</svg>
as this.
Exactly as this:
This was the original code:
I was changing the url to coordinates instead.
<div style="
width: 64px;
height: 64px;
left: 7px;
top: 7px;
background-color: rgba(0,0,0,.7);
background-image: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTIyNiAxNDgxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0wIDEzOTRWODdDMCA0Ni4zIDEzLjMgMTkuOCA0MCA3LjUgNjYuNy00LjggOTguNy4zIDEzNiAyM2wxMDM0IDYzNGMzNy4zIDIyLjcgNTYgNTAuMyA1NiA4M3MtMTguNyA2MC4zLTU2IDgzTDEzNiAxNDU4Yy0zNy4zIDIyLjctNjkuMyAyNy44LTk2IDE1LjUtMjYuNy0xMi4zLTQwLTM4LjgtNDAtNzkuNXoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=');
background-repeat: no-repeat;
background-size: 24px;
background-position: 58% 50%;
border-radius: 500px;
border: 1px solid red;
cursor: pointer;
"> </div>
This is what it looks like when I replace the url with the coordinates.
I was trying to copy it from this:
<iframe src="https://open.spotify.com/embed?uri=spotify%3Atrack%3A33Q6ldVXuJyQmqs8BmAa0k" width="250" height="330" frameborder="0" allowtransparency="true"></iframe>
And these are the coordinates for that svg. It’s just that when you change the url to an svg, it doesn’t look the same.
<svg viewBox="0 0 1226 1481" xmlns="http://www.w3.org/2000/svg"><path d="M0 1394V87C0 46.3 13.3 19.8 40 7.5 66.7-4.8 98.7.3 136 23l1034 634c37.3 22.7 56 50.3 56 83s-18.7 60.3-56 83L136 1458c-37.3 22.7-69.3 27.8-96 15.5-26.7-12.3-40-38.8-40-79.5z" fill="red"/></svg>
This is the closet I’ve been able to come to replicating the coordinates with the svg url. But the pixels don’t line up exactly the same. They are off slightly.
The the left (blue) svg is the one using coordinates, the one on the right (red) is using, a url. I’m trying to get the blue one to line up with the red one. Pixel wise, where they are lined up the same.
These are the coordinates for the blue one.
-750 -950 2452 3365
The Play sign should be 24 x 29 with the pixels in the same spot as the red one
Both codes are in here.
Blue One
<svg viewBox="-750 -950 2452 3365" style="
width: 64px;
height: 64px;
background-color: rgba(0,0,0,.7);
background-repeat: no-repeat;
background-size: 24px;
background-position: 58% 50%;
border-radius: 500px;
border: 1px solid blue;
cursor: pointer;
">
<path d="M0 1394V87C0 46.3 13.3 19.8 40 7.5 66.7-4.8 98.7.3 136 23l1034 634c37.3 22.7 56 50.3 56 83s-18.7 60.3-56 83L136 1458c-37.3 22.7-69.3 27.8-96 15.5-26.7-12.3-40-38.8-40-79.5z" fill="white"/>
</svg><br>
Red One
<div style="
width: 64px;
height: 64px;
left: 7px;
top: 7px;
background-color: rgba(0,0,0,.7);
background-image: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTIyNiAxNDgxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0wIDEzOTRWODdDMCA0Ni4zIDEzLjMgMTkuOCA0MCA3LjUgNjYuNy00LjggOTguNy4zIDEzNiAyM2wxMDM0IDYzNGMzNy4zIDIyLjcgNTYgNTAuMyA1NiA4M3MtMTguNyA2MC4zLTU2IDgzTDEzNiAxNDU4Yy0zNy4zIDIyLjctNjkuMyAyNy44LTk2IDE1LjUtMjYuNy0xMi4zLTQwLTM4LjgtNDAtNzkuNXoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=');
background-repeat: no-repeat;
background-size: 24px;
background-position: 58% 50%;
border-radius: 500px;
border: 1px solid red;
cursor: pointer;
"> </div>
I thought with some kind of code magnifier where you can zoom in that that would be able to help get the pixels of the Blue One to look the same as the Red One.
I don’t understand your objective. If you want the svg to look exactly the same as the raster image to the very pixel, why not just use that image instead?
SVG is not a pixel based format, that’s not how it works, that’s actually the whole point of svg, that it’s not made up of pixels.
2 Likes
This is the raster Image:
data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTIyNiAxNDgxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0wIDEzOTRWODdDMCA0Ni4zIDEzLjMgMTkuOCA0MCA3LjUgNjYuNy00LjggOTguNy4zIDEzNiAyM2wxMDM0IDYzNGMzNy4zIDIyLjcgNTYgNTAuMyA1NiA4M3MtMTguNyA2MC4zLTU2IDgzTDEzNiAxNDU4Yy0zNy4zIDIyLjctNjkuMyAyNy44LTk2IDE1LjUtMjYuNy0xMi4zLTQwLTM4LjgtNDAtNzkuNXoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=
This is the raster image’s svg coordinates.
<svg viewBox="0 0 1226 1481" xmlns="http://www.w3.org/2000/svg"><path d="M0 1394V87C0 46.3 13.3 19.8 40 7.5 66.7-4.8 98.7.3 136 23l1034 634c37.3 22.7 56 50.3 56 83s-18.7 60.3-56 83L136 1458c-37.3 22.7-69.3 27.8-96 15.5-26.7-12.3-40-38.8-40-79.5z" fill="red"/></svg>
I wanted to use the coordinates instead of the raster image url.
SVG is the acronym for Scalable Vector Graphics.
Vector and raster images use different coordinate systems. The browser calculates where to draw the SVG image on the screen and will fill in pixels that lie in the path defined by the radian.
Point being, you do not need to determine X-Y coordinates, you need to determine angle and distance.
I would need to be much better at Math than I am to be able to convert raster coordinates to vector coordinates. (that cosine, arctangent, trigonometry stuff) Fortunately, I do not need to be, others have already done the work.
A search for “convert raster vector image” brings up results including one online site that allows drag-drop vector image uploading, and downloading the converted vector image.
1 Like
How do you covert this into an image so you can download it, then upload it?
data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTIyNiAxNDgxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0wIDEzOTRWODdDMCA0Ni4zIDEzLjMgMTkuOCA0MCA3LjUgNjYuNy00LjggOTguNy4zIDEzNiAyM2wxMDM0IDYzNGMzNy4zIDIyLjcgNTYgNTAuMyA1NiA4M3MtMTguNyA2MC4zLTU2IDgzTDEzNiAxNDU4Yy0zNy4zIDIyLjctNjkuMyAyNy44LTk2IDE1LjUtMjYuNy0xMi4zLTQwLTM4LjgtNDAtNzkuNXoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=
I would be downloading the code as an image:
<div style="
width: 64px;
height: 64px;
left: 7px;
top: 7px;
background-color: rgba(0,0,0,.7);
background-image: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTIyNiAxNDgxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0wIDEzOTRWODdDMCA0Ni4zIDEzLjMgMTkuOCA0MCA3LjUgNjYuNy00LjggOTguNy4zIDEzNiAyM2wxMDM0IDYzNGMzNy4zIDIyLjcgNTYgNTAuMyA1NiA4M3MtMTguNyA2MC4zLTU2IDgzTDEzNiAxNDU4Yy0zNy4zIDIyLjctNjkuMyAyNy44LTk2IDE1LjUtMjYuNy0xMi4zLTQwLTM4LjgtNDAtNzkuNXoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=');
background-repeat: no-repeat;
background-size: 24px;
background-position: 58% 50%;
border-radius: 500px;
border: 1px solid red;
cursor: pointer;
"> </div>
I would use a browser to right-click save-as.
I’m confused, I thought you wanted to use an SVG image instead of a raster image. You already have the SVG, so you want to convert it and not use an SVG image?
No, I wanted to use the SVG’s Coordinates instead of the raster image.
Coordinates being this:
viewBox="-750 -950 2452 3365"
When you put this into the url
data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTIyNiAxNDgxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0wIDEzOTRWODdDMCA0Ni4zIDEzLjMgMTkuOCA0MCA3LjUgNjYuNy00LjggOTguNy4zIDEzNiAyM2wxMDM0IDYzNGMzNy4zIDIyLjcgNTYgNTAuMyA1NiA4M3MtMTguNyA2MC4zLTU2IDgzTDEzNiAxNDU4Yy0zNy4zIDIyLjctNjkuMyAyNy44LTk2IDE1LjUtMjYuNy0xMi4zLTQwLTM4LjgtNDAtNzkuNXoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=
You get this:
<svg viewBox="0 0 1226 1481" xmlns="http://www.w3.org/2000/svg"><path d="M0 1394V87C0 46.3 13.3 19.8 40 7.5 66.7-4.8 98.7.3 136 23l1034 634c37.3 22.7 56 50.3 56 83s-18.7 60.3-56 83L136 1458c-37.3 22.7-69.3 27.8-96 15.5-26.7-12.3-40-38.8-40-79.5z" fill="red"/></svg>
Ah, OK. You want “SVG base64 decode”. Again, a search will bring up an online site that will do it for you.
Why would I need to decode it if I already have the coordinates?
<svg viewBox="0 0 1226 1481" xmlns="http://www.w3.org/2000/svg"><path d="M0 1394V87C0 46.3 13.3 19.8 40 7.5 66.7-4.8 98.7.3 136 23l1034 634c37.3 22.7 56 50.3 56 83s-18.7 60.3-56 83L136 1458c-37.3 22.7-69.3 27.8-96 15.5-26.7-12.3-40-38.8-40-79.5z" fill="red"/></svg>
You wouldn’t need to convert the base64 if you already have it converted. Just use what you have if that’s what you want to use.