hoothin
Paste SVG
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/
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>
https://front-end.io/svg2base64/
data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIxOTguNDc1IDE5OC40NzUgMTAzLjA1IDEwMy4wNSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gPGRlZnM+IDxsaW5lYXJHcmFkaWVudCBpZD0ibGluZWFyLWdyYWRpZW50IiB4MT0iNDUuNiIgeTE9IjkuODIiIHgyPSI4OC4zNiIgeTI9IjE1Ny43NiIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIGdyYWRpZW50VHJhbnNmb3JtPSJtYXRyaXgoMSwgMCwgMCwgMSwgMTkwLjAyNTg5MiwgMTkwLjQ0NTYzMSkiPiA8c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNlZjE5NzAiLz4gPHN0b3Agb2Zmc2V0PSIwLjE0IiBzdG9wLWNvbG9yPSIjZjIzYjVjIi8+IDxzdG9wIG9mZnNldD0iMC40NSIgc3RvcC1jb2xvcj0iI2Y3N2QzNSIvPiA8c3RvcCBvZmZzZXQ9IjAuNyIgc3RvcC1jb2xvcj0iI2ZjYWQxOCIvPiA8c3RvcCBvZmZzZXQ9IjAuODkiIHN0b3AtY29sb3I9IiNmZWNiMDciLz4gPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjZmZkNjAwIi8+IDwvbGluZWFyR3JhZGllbnQ+IDxjbGlwUGF0aCBpZD0iY2xpcC1wYXRoIj4gPHJlY3QgeD0iOC40NSIgeT0iOC4wMyIgd2lkdGg9IjEwMy4wNSIgaGVpZ2h0PSIxMDMuMDUiIHJ4PSI1MS41MiIvPiA8L2NsaXBQYXRoPiA8L2RlZnM+IDxyZWN0IGNsYXNzPSJjbHMtMi0td2hpdGVMb2dvIiB4PSIxOTguNDc1IiB5PSIxOTguNDc1IiB3aWR0aD0iMTAzLjA1IiBoZWlnaHQ9IjEwMy4wNSIgcng9IjUxLjUyIiBzdHlsZT0iZmlsbDogdXJsKCcjbGluZWFyLWdyYWRpZW50Jyk7IiB0cmFuc2Zvcm09Im1hdHJpeCgxLCAwLCAwLCAxLCAwLCAtNy4xMDU0MjczNTc2MDEwMDJlLTE1KSIvPiA8ZyBjbGFzcz0iY2xzLTMtLXdoaXRlTG9nbyIgc3R5bGU9ImNsaXAtcGF0aDogdXJsKCcjY2xpcC1wYXRoJyk7IiB0cmFuc2Zvcm09Im1hdHJpeCgxLCAwLCAwLCAxLCAxOTAuMDI1ODk0MTY1MDM5MDYsIDE5MC40NDU2MzI5MzQ1NzAzKSI+IDxwYXRoIGNsYXNzPSJjbHMtMS0td2hpdGVMb2dvIiBkPSJNMTcuMTIsNDguMTdhLjkuOSwwLDAsMCwuMzEtMS4zMSwxLDEsMCwwLDAtMS4zMi0uMywxLDEsMCwwLDAsMSwxLjYxWk03My4yNCwyM2EuODguODgsMCwwLDAsLjMtMS4zMiwxLDEsMCwwLDAtMS4zMS0uMywxLDEsMCwwLDAtLjMsMS4zMUExLDEsMCwwLDAsNzMuMjQsMjNaTTg1LjE3LDU5LjRhMS4wOSwxLjA5LDAsMSwwLDEuMzItLjgxQTEuMTMsMS4xMywwLDAsMCw4NS4xNyw1OS40Wk02OS40LDk2LjJjLS40MS0uMi0uODEuMS0xLC42MWEuODMuODMsMCwxLDAsMS0uNjFabS00NS44OS02OGEuNTEuNTEsMCwxLDAsLjItMWMtLjMsMC0uNjEuMS0uNjEuNEEuNDUuNDUsMCwwLDAsMjMuNTEsMjguMTlabTMuMjIsNTAuMTJjLS40MS4xLS43MS40LS42MS44MWEuNjkuNjksMCwwLDAsLjgxLjZjLjQsMCwuNjEtLjQuNjEtLjgxQS42OS42OSwwLDAsMCwyNi43Myw3OC4zMVpNOTQsNDRsLS42MSwyLjYzTDkxLDQ3Ljc3bDIuNjIuNjEsMS4xMiwyLjMyLjYtMi42M0w5Ny43MSw0N2wtMi42My0uNjFaTTU5Ljc5LDI2Ljc0YTEsMSwwLDAsMC0uNiwxLjQxLDQuNTksNC41OSwwLDAsMSwuMywzLDEuMTQsMS4xNCwwLDAsMCwuOTEsMS4zMWguMmExLDEsMCwwLDAsMS0uOTEsNi4xNCw2LjE0LDAsMCwwLS40LTQuMjRBMSwxLDAsMCwwLDU5Ljc5LDI2Ljc0Wm0tLjUtNC4zNWE2LDYsMCwwLDAtMS0xLjUyLDEuMTEsMS4xMSwwLDAsMC0xLjUyLDAsMS4wOSwxLjA5LDAsMCwwLDAsMS41Miw0LjYsNC42LDAsMCwxLC42MSwxLDEuMTgsMS4xOCwwLDAsMCwxLjUxLjUxQTEuMTUsMS4xNSwwLDAsMCw1OS4yOSwyMi4zOVpNOTcuNjYsOTMuMTRhMTI4LDEyOCwwLDAsMC02LTE4LjQ5Qzg5LjU5LDY5LjQzLDgyLjg1LDYzLDc4LjUsNTkuOEEzLjE2LDMuMTYsMCwwLDEsNzguMTksNTVDODIuNDQsNTAuOSw5MCw0Myw5Mi40NSwzOC44N2MxLjYtMi45Miw0Ljc1LTguNDYsNC44OS0xMy4yNi4zMS0zLjU3LS4xOC03LjctNC45MS05LjU5YTYuOSw2LjksMCwwLDAtNy4xNC45MmMtMywyLjA2LTQsNy43LTYuMDcsMTMuMzItMi40NCw2LjQ4LTYuMjgsNy4zLTguMzEsNy4zcy0uNy0yLjE0LTUuMzUtMTUuNTktMTctMTEtMjYuMjktNS40NGMtMTEuODMsNy4wNy02LjU4LDIyLjE0LTMuNjQsMzEuODVDMzQsNTAsMjcuNzQsNTEuMjEsMjIuMDgsNTQuMjRjLTMuNTIsMS44OS02LjUzLDMuMTEtOS40Nyw1LjQ3LTQuMDksMy4yOS01Ljg2LDctNC40NCwxMi4wNmE3LjIyLDcuMjIsMCwwLDAsMy41OCw0LjA5YzMuMzQsMS41Miw4LjI2LS42OSwxNS43OS02LjM1QTQ2LjE5LDQ2LjE5LDAsMCwxLDM5LjQ3LDY0czQuNTUsNyw4LjgsMTUuMjctNC41NiwxMS01LjQ3LDExUzI4LDg4LjkyLDMxLjE4LDEwMC42NXMxOS45Miw3LjQ4LDI4LjUxLDEuODIsNi40Ny0yNC4xNiw2LjQ3LTI0LjE2Qzc0LjU1LDc3LDc3LjE4LDg1Ljg5LDc4LDkwLjQ0cy0xLDEyLjQ0LDcuNDgsMTIuNjRhMTMuMjgsMTMuMjgsMCwwLDAsMy41NC0uNTFjNC41OC0xLjA2LDcuMjMtMy4zNiw4LjMyLTUuODFBNS44NCw1Ljg0LDAsMCwwLDk3LjY2LDkzLjE0Wm0tNDIuMzItNTVjLTguNTksMy4yNC0xMi43NC0xLTEzLjI0LTguNzktLjYxLTguOCw3LjU4LTExLDcuNTgtMTEsOS4xLTMsMTEuNTMsMS4zMSwxMy42NSw3Ljc4UzYzLjg0LDM0LjkzLDU1LjM0LDM4LjE2WiIgc3R5bGU9ImZpbGw6IHJnYigyNTUsIDI1NSwgMjU1KTsiLz4gPC9nPiA8L3N2Zz4=
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.
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.
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.
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!")}})()