Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Paste SVG #93

Open
neoOpus opened this issue Sep 25, 2023 · 6 comments
Open

Paste SVG #93

neoOpus opened this issue Sep 25, 2023 · 6 comments

Comments

@neoOpus
Copy link

neoOpus commented Sep 25, 2023

Hi,

I discovered that occasionally the search engine's logo (page) is not captured accurately. When I attempt to obtain a link for it from Dev Tools, it appears as a plain SVG embedded in the HTML, rather than a clickable link. Consequently, I am unable to save it directly without employing an extension or tool. Additionally, it is impractical to save the icon then add it… I wonder if it is possible to make it support pasting the <svg>...</svg> directly in the field and have it work this way?

example site :
https://odysee.com/

@neoOpus
Copy link
Author

neoOpus commented Sep 25, 2023

I am using this tool to edit and improve the SVGs and wish that I can just paste the exports directly

https://boxy-svg.com/app

example

<?xml version="1.0" encoding="utf-8"?> <svg viewBox="198.475 198.475 103.05 103.05" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="linear-gradient" x1="45.6" y1="9.82" x2="88.36" y2="157.76" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1, 0, 0, 1, 190.025892, 190.445631)"> <stop offset="0" stop-color="#ef1970"/> <stop offset="0.14" stop-color="#f23b5c"/> <stop offset="0.45" stop-color="#f77d35"/> <stop offset="0.7" stop-color="#fcad18"/> <stop offset="0.89" stop-color="#fecb07"/> <stop offset="1" stop-color="#ffd600"/> </linearGradient> <clipPath id="clip-path"> <rect x="8.45" y="8.03" width="103.05" height="103.05" rx="51.52"/> </clipPath> </defs> <rect class="cls-2--whiteLogo" x="198.475" y="198.475" width="103.05" height="103.05" rx="51.52" style="fill: url('#linear-gradient');" transform="matrix(1, 0, 0, 1, 0, -7.105427357601002e-15)"/> <g class="cls-3--whiteLogo" style="clip-path: url('#clip-path');" transform="matrix(1, 0, 0, 1, 190.02589416503906, 190.4456329345703)"> <path class="cls-1--whiteLogo" d="M17.12,48.17a.9.9,0,0,0,.31-1.31,1,1,0,0,0-1.32-.3,1,1,0,0,0,1,1.61ZM73.24,23a.88.88,0,0,0,.3-1.32,1,1,0,0,0-1.31-.3,1,1,0,0,0-.3,1.31A1,1,0,0,0,73.24,23ZM85.17,59.4a1.09,1.09,0,1,0,1.32-.81A1.13,1.13,0,0,0,85.17,59.4ZM69.4,96.2c-.41-.2-.81.1-1,.61a.83.83,0,1,0,1-.61Zm-45.89-68a.51.51,0,1,0,.2-1c-.3,0-.61.1-.61.4A.45.45,0,0,0,23.51,28.19Zm3.22,50.12c-.41.1-.71.4-.61.81a.69.69,0,0,0,.81.6c.4,0,.61-.4.61-.81A.69.69,0,0,0,26.73,78.31ZM94,44l-.61,2.63L91,47.77l2.62.61,1.12,2.32.6-2.63L97.71,47l-2.63-.61ZM59.79,26.74a1,1,0,0,0-.6,1.41,4.59,4.59,0,0,1,.3,3,1.14,1.14,0,0,0,.91,1.31h.2a1,1,0,0,0,1-.91,6.14,6.14,0,0,0-.4-4.24A1,1,0,0,0,59.79,26.74Zm-.5-4.35a6,6,0,0,0-1-1.52,1.11,1.11,0,0,0-1.52,0,1.09,1.09,0,0,0,0,1.52,4.6,4.6,0,0,1,.61,1,1.18,1.18,0,0,0,1.51.51A1.15,1.15,0,0,0,59.29,22.39ZM97.66,93.14a128,128,0,0,0-6-18.49C89.59,69.43,82.85,63,78.5,59.8A3.16,3.16,0,0,1,78.19,55C82.44,50.9,90,43,92.45,38.87c1.6-2.92,4.75-8.46,4.89-13.26.31-3.57-.18-7.7-4.91-9.59a6.9,6.9,0,0,0-7.14.92c-3,2.06-4,7.7-6.07,13.32-2.44,6.48-6.28,7.3-8.31,7.3s-.7-2.14-5.35-15.59-17-11-26.29-5.44c-11.83,7.07-6.58,22.14-3.64,31.85C34,50,27.74,51.21,22.08,54.24c-3.52,1.89-6.53,3.11-9.47,5.47-4.09,3.29-5.86,7-4.44,12.06a7.22,7.22,0,0,0,3.58,4.09c3.34,1.52,8.26-.69,15.79-6.35A46.19,46.19,0,0,1,39.47,64s4.55,7,8.8,15.27-4.56,11-5.47,11S28,88.92,31.18,100.65s19.92,7.48,28.51,1.82,6.47-24.16,6.47-24.16C74.55,77,77.18,85.89,78,90.44s-1,12.44,7.48,12.64a13.28,13.28,0,0,0,3.54-.51c4.58-1.06,7.23-3.36,8.32-5.81A5.84,5.84,0,0,0,97.66,93.14Zm-42.32-55c-8.59,3.24-12.74-1-13.24-8.79-.61-8.8,7.58-11,7.58-11,9.1-3,11.53,1.31,13.65,7.78S63.84,34.93,55.34,38.16Z" style="fill: rgb(255, 255, 255);"/> </g> </svg>

@hoothin
Copy link
Owner

hoothin commented Sep 26, 2023

https://front-end.io/svg2base64/

data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIxOTguNDc1IDE5OC40NzUgMTAzLjA1IDEwMy4wNSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gPGRlZnM+IDxsaW5lYXJHcmFkaWVudCBpZD0ibGluZWFyLWdyYWRpZW50IiB4MT0iNDUuNiIgeTE9IjkuODIiIHgyPSI4OC4zNiIgeTI9IjE1Ny43NiIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoMSwgMCwgMCwgMSwgMTkwLjAyNTg5MiwgMTkwLjQ0NTYzMSkiPiA8c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNlZjE5NzAiLz4gPHN0b3Agb2Zmc2V0PSIwLjE0IiBzdG9wLWNvbG9yPSIjZjIzYjVjIi8+IDxzdG9wIG9mZnNldD0iMC40NSIgc3RvcC1jb2xvcj0iI2Y3N2QzNSIvPiA8c3RvcCBvZmZzZXQ9IjAuNyIgc3RvcC1jb2xvcj0iI2ZjYWQxOCIvPiA8c3RvcCBvZmZzZXQ9IjAuODkiIHN0b3AtY29sb3I9IiNmZWNiMDciLz4gPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjZmZkNjAwIi8+IDwvbGluZWFyR3JhZGllbnQ+IDxjbGlwUGF0aCBpZD0iY2xpcC1wYXRoIj4gPHJlY3QgeD0iOC40NSIgeT0iOC4wMyIgd2lkdGg9IjEwMy4wNSIgaGVpZ2h0PSIxMDMuMDUiIHJ4PSI1MS41MiIvPiA8L2NsaXBQYXRoPiA8L2RlZnM+IDxyZWN0IGNsYXNzPSJjbHMtMi0td2hpdGVMb2dvIiB4PSIxOTguNDc1IiB5PSIxOTguNDc1IiB3aWR0aD0iMTAzLjA1IiBoZWlnaHQ9IjEwMy4wNSIgcng9IjUxLjUyIiBzdHlsZT0iZmlsbDogdXJsKCcjbGluZWFyLWdyYWRpZW50Jyk7IiB0cmFuc2Zvcm09Im1hdHJpeCgxLCAwLCAwLCAxLCAwLCAtNy4xMDU0MjczNTc2MDEwMDJlLTE1KSIvPiA8ZyBjbGFzcz0iY2xzLTMtLXdoaXRlTG9nbyIgc3R5bGU9ImNsaXAtcGF0aDogdXJsKCcjY2xpcC1wYXRoJyk7IiB0cmFuc2Zvcm09Im1hdHJpeCgxLCAwLCAwLCAxLCAxOTAuMDI1ODk0MTY1MDM5MDYsIDE5MC40NDU2MzI5MzQ1NzAzKSI+IDxwYXRoIGNsYXNzPSJjbHMtMS0td2hpdGVMb2dvIiBkPSJNMTcuMTIsNDguMTdhLjkuOSwwLDAsMCwuMzEtMS4zMSwxLDEsMCwwLDAtMS4zMi0uMywxLDEsMCwwLDAsMSwxLjYxWk03My4yNCwyM2EuODguODgsMCwwLDAsLjMtMS4zMiwxLDEsMCwwLDAtMS4zMS0uMywxLDEsMCwwLDAtLjMsMS4zMUExLDEsMCwwLDAsNzMuMjQsMjNaTTg1LjE3LDU5LjRhMS4wOSwxLjA5LDAsMSwwLDEuMzItLjgxQTEuMTMsMS4xMywwLDAsMCw4NS4xNyw1OS40Wk02OS40LDk2LjJjLS40MS0uMi0uODEuMS0xLC42MWEuODMuODMsMCwxLDAsMS0uNjFabS00NS44OS02OGEuNTEuNTEsMCwxLDAsLjItMWMtLjMsMC0uNjEuMS0uNjEuNEEuNDUuNDUsMCwwLDAsMjMuNTEsMjguMTlabTMuMjIsNTAuMTJjLS40MS4xLS43MS40LS42MS44MWEuNjkuNjksMCwwLDAsLjgxLjZjLjQsMCwuNjEtLjQuNjEtLjgxQS42OS42OSwwLDAsMCwyNi43Myw3OC4zMVpNOTQsNDRsLS42MSwyLjYzTDkxLDQ3Ljc3bDIuNjIuNjEsMS4xMiwyLjMyLjYtMi42M0w5Ny43MSw0N2wtMi42My0uNjFaTTU5Ljc5LDI2Ljc0YTEsMSwwLDAsMC0uNiwxLjQxLDQuNTksNC41OSwwLDAsMSwuMywzLDEuMTQsMS4xNCwwLDAsMCwuOTEsMS4zMWguMmExLDEsMCwwLDAsMS0uOTEsNi4xNCw2LjE0LDAsMCwwLS40LTQuMjRBMSwxLDAsMCwwLDU5Ljc5LDI2Ljc0Wm0tLjUtNC4zNWE2LDYsMCwwLDAtMS0xLjUyLDEuMTEsMS4xMSwwLDAsMC0xLjUyLDAsMS4wOSwxLjA5LDAsMCwwLDAsMS41Miw0LjYsNC42LDAsMCwxLC42MSwxLDEuMTgsMS4xOCwwLDAsMCwxLjUxLjUxQTEuMTUsMS4xNSwwLDAsMCw1OS4yOSwyMi4zOVpNOTcuNjYsOTMuMTRhMTI4LDEyOCwwLDAsMC02LTE4LjQ5Qzg5LjU5LDY5LjQzLDgyLjg1LDYzLDc4LjUsNTkuOEEzLjE2LDMuMTYsMCwwLDEsNzguMTksNTVDODIuNDQsNTAuOSw5MCw0Myw5Mi40NSwzOC44N2MxLjYtMi45Miw0Ljc1LTguNDYsNC44OS0xMy4yNi4zMS0zLjU3LS4xOC03LjctNC45MS05LjU5YTYuOSw2LjksMCwwLDAtNy4xNC45MmMtMywyLjA2LTQsNy43LTYuMDcsMTMuMzItMi40NCw2LjQ4LTYuMjgsNy4zLTguMzEsNy4zcy0uNy0yLjE0LTUuMzUtMTUuNTktMTctMTEtMjYuMjktNS40NGMtMTEuODMsNy4wNy02LjU4LDIyLjE0LTMuNjQsMzEuODVDMzQsNTAsMjcuNzQsNTEuMjEsMjIuMDgsNTQuMjRjLTMuNTIsMS44OS02LjUzLDMuMTEtOS40Nyw1LjQ3LTQuMDksMy4yOS01Ljg2LDctNC40NCwxMi4wNmE3LjIyLDcuMjIsMCwwLDAsMy41OCw0LjA5YzMuMzQsMS41Miw4LjI2LS42OSwxNS43OS02LjM1QTQ2LjE5LDQ2LjE5LDAsMCwxLDM5LjQ3LDY0czQuNTUsNyw4LjgsMTUuMjctNC41NiwxMS01LjQ3LDExUzI4LDg4LjkyLDMxLjE4LDEwMC42NXMxOS45Miw3LjQ4LDI4LjUxLDEuODIsNi40Ny0yNC4xNiw2LjQ3LTI0LjE2Qzc0LjU1LDc3LDc3LjE4LDg1Ljg5LDc4LDkwLjQ0cy0xLDEyLjQ0LDcuNDgsMTIuNjRhMTMuMjgsMTMuMjgsMCwwLDAsMy41NC0uNTFjNC41OC0xLjA2LDcuMjMtMy4zNiw4LjMyLTUuODFBNS44NCw1Ljg0LDAsMCwwLDk3LjY2LDkzLjE0Wm0tNDIuMzItNTVjLTguNTksMy4yNC0xMi43NC0xLTEzLjI0LTguNzktLjYxLTguOCw3LjU4LTExLDcuNTgtMTEsOS4xLTMsMTEuNTMsMS4zMSwxMy42NSw3Ljc4UzYzLjg0LDM0LjkzLDU1LjM0LDM4LjE2WiIgc3R5bGU9ImZpbGw6IHJnYigyNTUsIDI1NSwgMjU1KTsiLz4gPC9nPiA8L3N2Zz4=

@neoOpus
Copy link
Author

neoOpus commented Sep 26, 2023

Yes, I utilize such tools for performing the conversion, although I would prefer if it were not required and the conversion could be done directly on the settings page. This would simply involve linking to a JavaScript script.

@hoothin
Copy link
Owner

hoothin commented Sep 27, 2023

svg is just a file format, so it should be imported by "↑" button beside input. You can create a new file like "icon.svg" and paste the html code in.
I have not seen lots of needs with setting svg icon.
There actually is a png icon on odysee.com.

@neoOpus
Copy link
Author

neoOpus commented Sep 27, 2023

Typically, the SVG is not a separate file. It is not possible to save it without an extension or use the DevTools to copy the element and paste it in a text document, then rename it to .svg. This process is cumbersome. In my estimation, SVG quality is much better than .ico or .png and tends to use fewer resources. However, that is another subject.

The Github icon, for example, requires the steps mentioned above to obtain it. Most of the icons automatically grabbed by SJ are blurry or of very low quality…

Certainly, you are more knowledgeable and I may be mistaken.

@hoothin
Copy link
Owner

hoothin commented Sep 28, 2023

Create a bookmarklet, paste the under code into it. Right-click the target svg element and then execute the bookmarklet.

javascript:(()=>{let svg=document.activeElement&&document.activeElement.querySelector('svg');if(svg){navigator.clipboard.writeText('data:image/svg+xml;base64,'+btoa(unescape(encodeURIComponent(new XMLSerializer().serializeToString(svg)))));alert("copy over!")}})()

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants