I want to embed SVG image into UserJS script for Opera. The question is how to show this image on loaded page?
I show PNG images using <img src='data://image/png;base64,...'>, but SVG images aren't shown being used this way. Using external SVG file is OK, but not 'data://image/svg+xml,...'.
I can't embed SVG code to HTML directly, because not every page is XHTML.
I can use <object type='image/svg+xml' data='data://image/svg+xml,.../>, but then 'click' event doesn't work on it.
Click events work fine in <object>, but you'll have to catch the events inside the svg and not on the <object> element. You can get the embedding element from there easily: window.frameElement.
But I don't see why it shouldn't work in <img> elements, unless there's something wrong with the svg itself. I tested a simple example (though not in a userJS script) in Opera 10 build 1497 (WinXP) and it worked fine:
<!DOCTYPE html>
<img src="data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxMi4wLjEsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDUxNDQ4KSAgLS0+DQo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiIFsNCgk8IUVOVElUWSBuc19zdmcgImh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCgk8IUVOVElUWSBuc194bGluayAiaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+DQpdPg0KPHN2ZyAgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9IiZuc19zdmc7IiB4bWxuczp4bGluaz0iJm5zX3hsaW5rOyIgd2lkdGg9IjMwOC4wMTEiIGhlaWdodD0iMzYyLjQ3OSINCgkgdmlld0JveD0iMCAwIDMwOC4wMTEgMzYyLjQ3OSIgb3ZlcmZsb3c9InZpc2libGUiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMwOC4wMTEgMzYyLjQ3OSIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8Zz4NCgk8Zz4NCgkJPHBhdGggZD0iTTI3MS44OTMsMTQyLjAwNGMtMS42MDgsNi44MjEtMy45MDUsMTMuODI5LTYuODc0LDIxLjAwN2MtMi45NzMsNy4xNzgtNi40NDMsMTMuNzA0LTEwLjQwNSwxOS41NzgNCgkJCWMtMy45NzIsNS44NjgtNy44NTYsMTAuMjE1LTExLjY3NSwxMy4wNWwxMi42NTgsMzkuOTA2YzAuMDYsMC43NDktMC42MjksMy4yNzMtMi4wNiw3LjU0OWMtMS40MzUsNC4yOC0yLjQ2MSw3LjIwNS0zLjA5Niw4Ljc2Nw0KCQkJYy0yLjk2MywwLjk5My01LjAzOSwyLjgwNi02LjIxOSw1LjQyN2MtMS4xODQsMi42MTctMS42MTgsNS45MjgtMS4yOTgsOS45NDZjMC4yNTgsMy4yNiwxLjQzOCw4LjU5NiwzLjU1NSwxNi4wMDUNCgkJCWMxLjEwNiw0LjQ2LDEuNzI5LDcuNDQyLDEuODQ5LDguOTQ2YzAuMTM3LDEuNzcyLDAuMDgsNC4yNTctMC4xNjcsNy40NTZjLTAuMjU4LDMuMTk5LTAuNzI5LDUuMjA5LTEuNDI1LDYuMDI0DQoJCQljMC4yODEsMy41NDEsMC4xOTQsOC43NjQtMC4yNjgsMTUuNjY3Yy0wLjU5NSw1LjM5LTAuNzcxLDkuNDc2LTAuNTUxLDEyLjI1NGMwLjI2NCwzLjI5LDEuMTI2LDYuMTQyLDIuNTg0LDguNTcybC00Ljk5NSw4Ljc4Ng0KCQkJYy02LjYxMywyLjk1Ni0xMi42OTEsNS4yNjYtMTguMjQ4LDYuOTI4Yy01LjU3LDEuNjU4LTExLjc0OSwyLjc1OC0xOC41MzIsMy4yOTdsLTI2LjEwMiwxLjMxMQ0KCQkJYy0yLjY5MS0yLjA1My03LjE3Mi00LjIyOS0xMy40MjctNi41MDNjLTYuNzQ3LTItMTEuNDc3LTQuMjc2LTE0LjIxNi02LjgzOGwtNy41NTEsMC42MDVjLTMuNDI3LTEuNzU1LTYuNDU5LTQuMTA1LTkuMTA0LTcuMDU1DQoJCQljLTIuNjMzLTIuOTQyLTUuNTMzLTYuODItOC43LTExLjYxOGwtMS42OTgtMi4xNDZsLTAuNTA4LTYuNDA5Yy0wLjEyLTEuNTAxLTAuOTkzLTQuNTg3LTIuNjMzLTkuMjYxDQoJCQljLTAuOTUxLTIuNDUxLTEuNjA4LTQuMjkzLTEuOTU2LTUuNTMzbC0zLjExMS0wLjg4M2wtMTUuNjUtMjQuOTE4bC00LjM2LTIuMzA0bC01LjQyMSwzLjQ2NA0KCQkJYy05LjUyOS0yLjAyNi0xOC42NTgtNC42NDEtMjcuMzk5LTcuODY3Yy04LjcyOC0zLjIxNi0xNi45NzEtNy4zMDYtMjQuNzAxLTEyLjI0N2MtNy43NDEtNC45NDEtMTQuMTAxLTEwLjk0Ni0xOS4wODktMTguMDExDQoJCQljLTQuOTktNy4wNjEtNy44NjItMTUuMjMyLTguNTk3LTI0LjUyM2MtMC43NzctOS43OTMsMC4zMTctMTcuNTIyLDMuMjc4LTIzLjE5MmMyLjk3NC01LjY2NCw3Ljg0NC0xMi4wNTMsMTQuNjIxLTE5LjE2OA0KCQkJYzcuNDk2LTcuNjY5LDEyLjc5Mi0xNC4yNzksMTUuODktMTkuODNsMS41MTQtMC4xMmw0Ljg2My01LjY5N2MtNS4yODgtOS4xODgtMTMuMDI5LTIzLjc2MS0yMy4yMjMtNDMuNzAxDQoJCQlDMjAuMTUsOTAuNDc5LDEyLjg0NSw3Ni42MzEsNy41MzIsNjcuMTczbC03LjUyLTEzLjQ1Yy0wLjE1NS0yLjAwOSwxLjEwNy00LjQ1LDMuNzgyLTcuMzI5YzIuNjkxLTIuODY1LDYuMDExLTUuNjY0LDkuOTcxLTguMzc4DQoJCQljMy45Ni0yLjcyMiw3Ljg4Ni01LjEyOSwxMS43NjItNy4yMDhjMy44OTUtMi4wNzYsNi43MTItMy4xODksOC40NzctMy4zMjdjMS4xNTMtMS4zNjEsMy40MzgtMi45MzIsNi44MzctNC43MjENCgkJCWMzLjM5OC0xLjc5NSw1Ljc5MS0zLjUsNy4xOTEtNS4xMzJjNy41NDItMC41OTgsMTguNDQ5LTMuNDksMzIuNzIzLTguNjc2YzE0LjI2OC01LjE4NiwyNS4xNzQtOC4wNzQsMzIuNzIzLTguNjczDQoJCQljNC43ODYtMC4zNzgsMTEuMDUtMC4zNzEsMTguNzk2LDAuMDE3YzcuNzYsMC40MDgsMTUuNzM5LDEuMzQ4LDIzLjk2NiwyLjg0OWM4LjIyMSwxLjQ5NSwxNS41OSwzLjUxMSwyMi4xMjMsNi4wMjUNCgkJCWM2LjUyNSwyLjUxOCwxMS4wODYsNS43MDcsMTMuNjc0LDkuNTQyYzAuODMzLDAuOTU2LDEuNTM4LDMuNTUsMi4xMzMsNy44MWMwLjU4OSw0LjI1NiwxLjIyNCw5LjAxNywxLjg5MywxNC4yNzkNCgkJCWMwLjQ2Miw1Ljc4OCwwLjg2OSw5LjI5MiwxLjIxNywxMC41MzVsMC42MjIsMi45ODVsLTAuNjA0LDEuOTQ2bC0wLjQzOC0wLjcxOWMyLjAyOSw2LjQxMyw0LjMxOSwxNi4xMTIsNi44NjcsMjkuMDY3DQoJCQljMi43MTgsMTEuOTM2LDUuMjEyLDIxLjgwOSw3LjQ4MiwyOS42MDJjMi4yNiw3Ljc5LDUuMzIzLDE1LjMxOSw5LjIwNCwyMi42MDFjMS42NjktMS4xNDMsNC4xODMtMi45ODUsNy41MzMtNS41MjMNCgkJCWM3LjYyNi01LjkyMSwxNC4zMjktMTAuODE2LDIwLjEtMTQuNjkxYzUuNzYxLTMuODc4LDEwLjY1OS01Ljk3OCwxNC42ODItNi4yOTlsMTAuOTgyLDEzLjkzOA0KCQkJQzI3NC4xMTIsMTI5LjI2MywyNzMuNTA0LDEzNS4xOSwyNzEuODkzLDE0Mi4wMDR6IE0xNy45MDcsMjE2LjY4MmwtMC43NjEsMC4wNjFsMC4zMyw0LjE0NmwwLjc1OS0wLjA2MUwxNy45MDcsMjE2LjY4MnoNCgkJCSBNMjEuNDg5LDE5OS42ODhjLTAuNjQxLDEuNTYyLTAuOTMzLDIuNjA3LTAuODkxLDMuMTA5Yy0xLjg5MSw0Ljk1NC0yLjczMyw4LjY4OS0yLjUzMSwxMS4yMDcNCgkJCWMyLjA3Ny01LjczLDMuNzYzLTEwLjA0NCw1LjA1LTEyLjkzNkMyMi41MywyMDAuMTEyLDIxLjk5MiwxOTkuNjUsMjEuNDg5LDE5OS42ODh6IE0xOS4xMzksMjEzLjE2MWwtMC4zNzEsMC4wM2wwLjY5NCw4LjY4Ng0KCQkJbDAuMzY0LTAuMDNMMTkuMTM5LDIxMy4xNjF6IE0yMC45MDQsMjIwLjk5OGwtMC4zNzcsMC4wM2wwLjY4OCw4LjY3OWwwLjM3Ni0wLjAzTDIwLjkwNCwyMjAuOTk4eiBNMjIuMDA0LDIzMC4wMjVsLTAuMzgzLDAuMDI5DQoJCQlsMC4wOSwxLjEzN2wwLjM4My0wLjAyOUwyMi4wMDQsMjMwLjAyNXogTTIxLjcxNiwyMjEuNjk2bC0wLjM3MSwwLjAzbDAuMDksMS4xM2wwLjM3MS0wLjAyOUwyMS43MTYsMjIxLjY5NnogTTI0Ljg4MSwyMzIuNDQ1DQoJCQlsLTAuNzI0LDAuNDQ1bC0wLjcxNy05LjA1OGMwLjAxOCwwLjI1MS0wLjA5LDAuNTE1LTAuMzE4LDAuNzg5Yy0wLjIzMiwwLjI2OC0wLjM0MSwwLjUyNS0wLjMyMiwwLjc3OQ0KCQkJYzAuMDE4LDAuMjUsMC4yMjEsMS4xMjMsMC41OTIsMi42MTFjMC4xMDIsMS4yNTcsMC4xNjcsMi4xNDMsMC4yMSwyLjY0MWwwLjExOSwxLjUxOWMtMC4yNTEsMC4wMTctMC41MTUtMC4wOTgtMC43ODktMC4zMjUNCgkJCWMwLjIzMi0wLjI2NywwLjQ3OC0wLjQyNCwwLjcyOS0wLjQ0Yy0wLjU2OC0wLjcxMy0wLjkxNS0xLjk0OS0xLjA1OC0zLjcwOGMtMC4wMTktMC4yNTQtMC4wOS0xLjEzNC0wLjIwOS0yLjYzOQ0KCQkJYy0wLjA3OS0xLjAxMy0wLjEzMi0xLjY0MS0wLjE1LTEuODkybDAuMDksMS4xM2MtMC4xOTIsMC43NzktMC4yNzUsMS4yOTQtMC4yNTIsMS41NDVsMC4yOTksMy43NjgNCgkJCWMwLjAxOSwwLjI1MSwwLjIwNCwxLDAuNTUyLDIuMjM2YzAuMTAyLDEuMjU4LDAuMTYxLDIuMDE3LDAuMTg2LDIuMjcxYy0wLjA0Mi0wLjUwNSwwLjE2Ny0xLjAyOSwwLjYzNC0xLjU4MWwwLjUyNiwxLjg2Mg0KCQkJbC0wLjc4OS0wLjMxMmMwLjAyMywwLjI1MSwwLjIwMiwwLjg3MywwLjUzMiwxLjg1M2MwLjQzMSwyLjI0MywwLjkyOCwzLjcyMSwxLjQ5Niw0LjQzOUwyNC44ODEsMjMyLjQ0NXogTTI1LjM2NiwyMzMuNTUyDQoJCQlsLTAuNzU0LDAuMDYxbDAuMTUsMS44OTNsMC43NTQtMC4wNjFMMjUuMzY2LDIzMy41NTJ6IE04OS4yNTEsMTU0LjA3N2wtMS4xMywwLjA5Yy0wLjUwMywwLjAzNy0wLjg4NiwwLjA3My0xLjEzLDAuMDkNCgkJCWMtNi4wMzcsMC40NzgtMTIuOTQ2LDIuNjI1LTIwLjczNiw2LjQzNmMtMS4wNTMtMC40MDQtMi4wNzYtMC41NzUtMy4wNzQtMC40OTVjLTIuNzcsMC4yMjEtNi41MDksMS42ODItMTEuMjI5LDQuMzkNCgkJCWMtNC43MjEsMi43MTItOS4zMjYsNi4wMjUtMTMuODI3LDkuOTQzYy00LjQ5OSwzLjkxMi04LjI5Miw3LjkwNC0xMS4zODQsMTEuOTUzYy0zLjA5OCw0LjA0OS00LjY2LDcuNTQ5LTQuNjc3LDEwLjQ5MWwyLjA2MywyLjEyDQoJCQlsLTAuMDU5LTAuNzU2Yy0wLjA5Ny0xLjI2MSwwLjMyMy0zLjEyNiwxLjI2Ny01LjYwNGMwLjkzOS0yLjQ4NCwyLjMxMS01LjEyOSw0LjExNi03LjkyN2MxLjgwNy0yLjc5OSwzLjU3OC01LjA5OSw1LjM0My02Ljg4MQ0KCQkJYzEuNzUzLTEuNzg5LDMuMjYtMi43MjksNC41MjMtMi44MjlsMS43MjktMi4wMzNsMC44NDMsMS4wN2wxLjY4Mi0yLjc4OWwxLjE1NSwwLjI4OGwyLjk5LTAuNjE1DQoJCQljLTAuMDc4LTEuMDEzLDAuNzEyLTIuMjEzLDIuMzY5LTMuNjE0bDAuMzc4LTAuMDNsMi4zNTcsMC45NTZsMS4xLTAuNDcxbC0wLjg3My0xLjQ0MWwwLjMxMS0wLjc5MmwxLjg4OS0wLjE0N2wxLjU2OCwwLjYzOA0KCQkJYzAuODQ0LTIuMSwyLjAyMy0zLjE5OSwzLjUzNi0zLjMybDAuMzc4LTAuMDNsMC4wODMsMS4xM2MwLjk2My0wLjU3OSwxLjY3NS0xLjI2NywyLjExMS0yLjA2Mw0KCQkJYzAuNDQ4LTAuNzQ5LDAuOTIxLTEuMTM3LDEuNDI0LTEuMThjMC4yNTEtMC4wMTcsMC42NCwwLjA3NCwxLjE2NSwwLjI2NGMxLjI3NSwwLjEzNCwyLjE2LDAuMTgxLDIuNjcsMC4xMzdsMS44LTEuMmwwLjQ1OSwxLjAyMw0KCQkJbDQuNzMzLTIuNTAxbDAuMzc2LTAuMDNsMC4zNTQtMC4zNzhjMS4yNDktMC4xMDEsMi40MjIsMC4yODEsMy40OTksMS4xMzdsMi41MDEtMS45NjlsMS41NjgsMC41ODJsMS4wNzYtMC43ODlsLTAuODA3LTAuNjQ4DQoJCQlsMC42NjQtMS4xMWMwLjI2OSwwLjIwNywwLjY3NSwwLjUzOCwxLjIyLDAuOTYzYzAuNzg5LDAuNDExLDEuMjAyLDAuODQ5LDEuMjM5LDEuMzE0Qzg3Ljg3LDE1Ny4zNzQsODguNjY2LDE1Ni4yNSw4OS4yNTEsMTU0LjA3Nw0KCQkJeiBNMzkuMDA1LDI1Ny4xNTNjLTEuODg0LTEuMzcxLTMuODI4LTMuNjE4LTUuODQ5LTYuNzQ3bC0wLjQzOC0wLjcyOWMtMC4wMjMtMC4yNTUtMC4yOTktMC42MDUtMC44NDMtMS4wNzMNCgkJCWMtMC41NDUtMC40NTgtMC45NTEtMC44LTEuMjItMS4wNGwtMC40MDgtMC4zNDhsLTAuMDMtMC4zODJjLTAuMjkyLTAuNDgxLTAuNDUzLTAuODQ2LTAuNDcxLTEuMTAzDQoJCQljLTEuNDktMi45MTktMi43NjUtNC41ODgtMy44MTItNS4wMTJsLTAuMDMtMC4zNzFsMC4zMTEtMC43ODlsLTAuMDMtMC4zNzFsMC40NDMsMC43MTljMC4wNDIsMC41MDEsMC4wNzIsMC44ODMsMC4wOSwxLjEzNw0KCQkJYy0wLjEyMS0xLjUxNS0wLjUxNS0zLjI1LTEuMTc5LTUuMjI5Yy0wLjIxNiwwLjUyNS0wLjI3NiwxLjI5MS0wLjE5MiwyLjI5N2MwLjAzNywwLjUwMiwwLjEwOSwxLjM4OCwwLjIxMSwyLjYzOA0KCQkJYzAuMzQ2LDEuMjQ0LDAuNTczLDIuNDg4LDAuNjc1LDMuNzUyYzAuMjUtMC4wMjEsMi4wNTMsMS45ODUsNS40MTUsNi4wMjRjMS42NjMsMS44ODksMy4xODgsMy41NDEsNC41NjMsNC45NTENCgkJCWMxLjM4MywxLjQwOCwyLjMzOSwyLjM1MSwyLjg4NCwyLjgxMkwzOS4wMDUsMjU3LjE1M3ogTTI3LjAxMSwyNDQuNDI4bC0wLjExOS0xLjUxOGwwLjM3Ni0wLjAzbDAuMTIxLDEuNTE5TDI3LjAxMSwyNDQuNDI4eg0KCQkJIE02My40MDEsMTEwLjUyNmMtMC4yNSwwLjAyMy0wLjQ5NywwLjE3NC0wLjcyOSwwLjQ0MWwtMC4zOTYtMC4zNTFjMC40OC0wLjI4OCwwLjcxMi0wLjU2MiwwLjY4OS0wLjgwOWwtMS4xOS0wLjY2OQ0KCQkJYy0xLjM0MS0wLjkwOS0yLjEzNi0xLjM0Ny0yLjM4Ny0xLjMyN2MtMC4yNSwwLjAxNy0wLjc0MiwwLjE4NC0xLjQ3MSwwLjQ5NWwtMC4zNTQsMC40MDhjMC43NzksMC4xOSwxLjgzNywwLjc0MiwzLjE2NiwxLjY1MQ0KCQkJYzAuNzk0LDAuNDQxLDEuNDUzLDAuNzY2LDEuOTczLDAuOTczYzAuMDI1LDAuMjUsMC4wNDMsMC41MDgsMC4wNiwwLjc2MmwwLjc2MS0wLjA2N0w2My40MDEsMTEwLjUyNnogTTU4LjcxNywxMDQuMDY3DQoJCQlsLTAuNzU5LDAuMDU3bDAuMTE5LDEuNTA4bDAuNzYxLTAuMDYxTDU4LjcxNywxMDQuMDY3eiBNNjQuNjc1LDExMi4zMjJsLTEuNTAxLDAuMTJsMC4wMywwLjM4MWwxLjUwOC0wLjEyMUw2NC42NzUsMTEyLjMyMnoNCgkJCSBNNzcuMzE2LDEyOC4wMzJjLTEuMDQ2LTAuNDIxLTEuODM3LTAuNzM5LTIuMzU3LTAuOTUzbDAuNjctMS4xOTdjLTAuMzExLTAuNzM1LTEuMDc3LTEuNjIyLTIuMzA0LTIuNjY4DQoJCQljLTEuMjItMS4wMzMtMi4yMi0xLjY1MS0yLjk5MS0xLjg0OWwtMC4wOS0xLjEzYy0wLjU4Ni0wLjk2My0xLjQxNy0xLjkwOS0yLjUtMi44NDJjLTEuMzk5LTEuNjUxLTIuMzkyLTIuOTY1LTIuOTcyLTMuOTM1DQoJCQlsMC4xMTksMS41MTFjMS45NDQsMi4xMjYsMy42NDksNC41ODMsNS4xMzksNy4zNzljMS40ODksMi43ODgsMi4zNDUsNS41NywyLjU2OCw4LjMzMmMwLjI1NSwzLjI4LTEuNjI4LDUuMDc1LTUuNjQ5LDUuMzk2DQoJCQljMC44MTQsMC42ODksMS40NzMsMS4wMTcsMS45NzQsMC45NzdjMS41MDgtMC4xMjEsMy4yMi0wLjg4Niw1LjEzNC0yLjMwNGMxLjE5NS0wLjg1NiwyLjAzMy0xLjQzMSwyLjUxOC0xLjcxOA0KCQkJYzAuOTYzLTAuNTc5LDIuNTgtMC45NjYsNC44NC0xLjE0N2MwLjk4MS0wLjMzMSwxLjg1NS0wLjUyOCwyLjYwOS0wLjU4OEM4Mi42NzEsMTMwLjEzMiw4MC40MzQsMTI5LjA0OSw3Ny4zMTYsMTI4LjAzMnoNCgkJCSBNODQuOTc5LDI2Mi42MDljLTEuMzUxLTQuMTg2LTIuMjI1LTcuMjg1LTIuNjM4LTkuMjg0Yy0wLjA2MS0wLjc0OS0wLjI1MS0xLjQ4OC0wLjU2Mi0yLjIzDQoJCQljLTAuNDMxLTIuMjQzLTAuODE0LTMuOTI1LTEuMTU1LTUuMDM4Yy0wLjM0MS0xLjExMy0wLjc2Ni0xLjYzOS0xLjI2OS0xLjYwNWwxLjc5NSw4LjIxNWMyLjM2OSwxMC42OTksNC4yNTMsMTguNTIyLDUuNjU5LDIzLjQ3MQ0KCQkJbDEuMTMyLTAuMDljMC4yMzItMC4yNzEsMC4zMjktMC42NTksMC4yOTItMS4xNkM4OC4wMTQsMjcyLjExNCw4Ni45MjQsMjY4LjAyMiw4NC45NzksMjYyLjYwOXogTTgxLjg4MiwyNDIuNzI5bC0wLjc2MSwwLjA2MQ0KCQkJbDAuMTIxLDEuNTE1TDgyLDI0NC4yNDRMODEuODgyLDI0Mi43Mjl6IE04NC40NTksMjMyLjI3MWMwLjAyMywwLjI1NC0wLjA2NSwwLjc2Ni0wLjI1LDEuNTM4DQoJCQljLTAuMjE2LDAuNTM1LTAuNTI3LDEuNDM4LTAuOTI4LDIuNzM1Yy0wLjU3NSwyLjMyNi0xLjIwOSwzLjg5NS0xLjg5Niw0LjcxNGwwLjA4OSwxLjEyM2MwLjUwMy0wLjAzMywwLjczLTAuMzExLDAuNjg4LTAuODEyDQoJCQljMC4yNzQsMC4yMzQsMC40MzcsMC41OTksMC40NzMsMS4xMDFjLTAuMDE4LTAuMjUxLDAuMDc3LTAuNTA5LDAuMzExLTAuNzgyYy0wLjA2LTAuNzQ5LDAuMDMtMS4yNjgsMC4yNjItMS41MzhsLTAuMDMtMC4zNzgNCgkJCWMtMC4wNi0wLjc1MywwLjEzNy0xLjM5NywwLjU5OS0xLjk0OWMwLjAyMywwLjI1MSwwLjE3NCwwLjQ5NSwwLjQ0MywwLjcyOWwtMC4wOS0xLjEzN2wwLjQwOCwwLjM0OA0KCQkJYzAuMDc3LDEuMDEtMC4xMzksMS41MzEtMC42NCwxLjU3NWMtMC4yMjcsMC4yNjgtMC4zMzYsMC41MzEtMC4zMTIsMC43ODJsMC43MjYtMC40MzhsMC4zNzYtMC4wMjYNCgkJCWMtMC4wNi0wLjc1NiwwLjEwMi0xLjkwOSwwLjQ4NS0zLjQ2YzAuNDI1LTEuMDQsMC42MDQtMS45NDMsMC41NDMtMi43MDJDODUuMTcyLDIzMy4yMzEsODQuNzUyLDIzMi43NTcsODQuNDU5LDIzMi4yNzF6DQoJCQkgTTgxLjY0MSwyMzkuNzE0bC0wLjMxNiwwLjc4NmwwLjQwNiwwLjM0OGwwLjMxMS0wLjc4Nkw4MS42NDEsMjM5LjcxNHogTTEwNS4wODIsMTMzLjQzOGMtMC41MDMsMC4wNDMtMS4xMiwwLjIyMS0xLjg2MSwwLjUzMg0KCQkJYy0wLjc0OSwwLjA2LTEuMjUsMC4xMDQtMS41MDIsMC4xMmMtMS43NjQsMC4xNDQtNC4yMDUtMC4yOTctNy4zMjItMS4zMzRjLTMuMTA0LTAuNzcyLTUuNDA4LTEuMS02LjkxNi0wLjk3Ng0KCQkJYy0xLjI1NSwwLjA5Ny0yLjc5MywwLjY2NS00LjYwNSwxLjcwMmMtMS44MTksMS4wNC0yLjY4NywyLjA2My0yLjYwMywzLjA3M2MwLjEwMiwxLjI3MywwLjc3NywxLjg1NSwyLjA0LDEuNzU1DQoJCQljMC4yNTItMC4wMiwwLjk3LTAuNDYxLDIuMTY3LTEuMzI0bDAuNzI0LTAuNDM1YzEuMjItMC42MDUsMy4zMzItMS4wMjMsNi4zNTItMS4yNzFjMi4wMTYtMC4xNTQsNC43MDksMC4yNjQsOC4wODMsMS4yNzENCgkJCWMzLjEsMC43NjksNS40MDMsMS4xLDYuOTA0LDAuOTc5YzEuNTItMC4xMjEsMi4yMTgtMC44MTIsMi4xMTgtMi4wODNDMTA4LjUzOSwxMzMuOTM3LDEwNy4zNDIsMTMzLjI1OCwxMDUuMDgyLDEzMy40Mzh6DQoJCQkgTTEyOC4yNDQsMTUyLjQ5OWwtMC43NTksMC4wNmwtMC43MjQsMC40MzVsMC4xMTksMS41MDhjLTAuNzcxLTAuMTktMS42OTMtMC42MjItMi43NTgtMS4yOTcNCgkJCWMtMS44NjYtMS4xMi0zLjc5OC0xLjU5OC01LjgxNC0xLjQzNWwtMjYuNDczLDEuMzM3Yy0xLjI1NSwwLjEwNC0xLjg2LDAuNTM1LTEuOCwxLjI4N2wwLjEyMSwxLjUxNWwzLjAyMS0wLjI0MQ0KCQkJYzAuMjUxLTAuMDIzLDAuNTAzLTAuMDQsMC43NjEtMC4wNmwwLjA4OCwxLjEzYzAuNzMtMC4zMTEsMS41NjgtMS4wMSwyLjQ4OS0yLjFsLTAuNDY2LTEuMTA2DQoJCQljMC44MTQsMC43MDIsMS43ODIsMS43NjUsMi45MDcsMy4xODljMC4yNS0wLjAyMywwLjczNS0wLjMxMSwxLjQ1NC0wLjg3M2MwLjcxNy0wLjU2MiwxLjMyMi0wLjg2MywxLjgzMS0wLjkwMw0KCQkJYzAuMjUtMC4wMiwwLjYzMywwLjA3NywxLjE2LDAuMjg4bDAuODE0LDAuNjk5YzEuMTUzLTEuMzY0LDIuMTExLTIuMDc2LDIuODY1LTIuMTNjMC41MDEtMC4wNDMsMC43ODksMC40NDEsMC44NzMsMS40NDgNCgkJCWwwLjA2MSwwLjc0OWwxLjEzLTAuMDljMC45MjgtMS4wODMsMS44ODYtMS43OTUsMi44NjctMi4xMjNsMC40MTMsMC4zNTFsLTAuMjU3LDEuNTMxYzAuMjQ0LTAuMDE3LDAuNjIyLTAuMTY3LDEuMS0wLjQ2MQ0KCQkJYzAuNzE5LTAuNTU1LDEuMzIyLTAuODY2LDEuODMtMC45MDNjMC4yNTItMC4wMjMsMC42MzUsMC4wNzQsMS4xNTUsMC4yODFjMC4yNjksMC4yMzQsMC41MzgsMC4zNDgsMC43OTYsMC4zMjRsMC43MTctMC40NDENCgkJCWwwLjc1NC0wLjA2YzAuNzU0LTAuMDYxLDEuMTg2LDAuNTQyLDEuMjg4LDEuNzkybDEuMS0wLjQ2NWMxLjIyLTAuNTk5LDIuMDc2LTAuOTI2LDIuNTc4LTAuOTYzDQoJCQljMC41MDMtMC4wNDMsMC44OTMsMC4wNiwxLjE2NywwLjI5MWMwLjI3LDAuMjI3LDAuNTM5LDAuMzM3LDAuNzkxLDAuMzE0YzAuMjQ0LTAuMDIsMC42MTUtMC4wNSwxLjEyMy0wLjA5DQoJCQljMC40ODUtMC4yODcsMC45NzctMC40NTUsMS40NzgtMC40OThsMS4yMjcsMS4wNDZsMS4xNiwwLjI4MWMwLjQ3OS0wLjI4NCwwLjg0NC0wLjU3MiwxLjA3MS0wLjg0Mw0KCQkJYzAuOTI4LTEuMDgzLDEuODkxLTEuNjYyLDIuOS0xLjc0MmwwLjQxMywwLjMzN2wwLjc0OS0wLjA2QzEzMi40NDMsMTUyLjc5NiwxMjkuOTk4LDE1Mi4zNTUsMTI4LjI0NCwxNTIuNDk5eiBNMTE0LjQ4NSwyMzcuNDg0DQoJCQljLTAuNzg5LTAuNDM4LTEuNjU3LTEuNzY2LTIuNTk2LTMuOTY2Yy0wLjkyOC0yLjIxLTEuNDM2LTMuODEyLTEuNTEzLTQuODI0Yy0wLjAyNS0wLjI1MSwwLjA2NS0wLjc2NiwwLjI1LTEuNTM0bC0wLjA5LTEuMTM0DQoJCQlsLTEuMTMsMC4wOWMtMC40NzgsMC4yODgtMS4yMDIsMC43MzItMi4xNzgsMS4zMTFjLTIuNDM0LDEuMjA0LTMuNjAxLDIuNDM1LTMuNTA1LDMuNjk4YzAuMTQ0LDEuNzU5LDEuNjkzLDMuNzg4LDQuNjY3LDYuMDg1DQoJCQlsMC40MzcsMC43MjlsMC4zNzYtMC4wM2MwLjIzNC0wLjI3MywwLjQ3My0wLjQyNCwwLjczLTAuNDRjMC4yNDYtMC4wMjcsMC42NDYsMC4yLDEuMTksMC42NjFjMC4zMTEsMC43NDIsMC41OTksMS4wOSwwLjg0OSwxLjA3DQoJCQljMC4yNTEtMC4wMjMsMC43NDItMC4xNzgsMS40NzgtMC40ODhjMC40NzgtMC4yOTQsMC44NDQtMC40NTUsMS4wOTUtMC40NzVMMTE0LjQ4NSwyMzcuNDg0eiBNMTA4Ljc1NCwyMzIuMjMxDQoJCQljLTAuNDI1LDEuMDQ3LTAuNjE3LDEuODI1LTAuNTc1LDIuMzJsLTEuMTMsMC4wOTFjLTAuMDIzLTAuMjQ0LTAuMDYxLTAuNzQ5LTAuMTIxLTEuNTE1bC0wLjQ2Ni0xLjA5NGwtMC4wODgtMS4xMzcNCgkJCWMtMC4wMjUtMC4yNDQsMC4xOS0wLjc3MiwwLjYzMy0xLjU2OGwwLjMxOC0wLjc3OGMxLjA0NiwwLjQyMSwxLjU4OSwwLjg4MywxLjYyNiwxLjM4NA0KCQkJQzEwOC45OTMsMjMwLjQzNywxMDguOTIxLDIzMS4yMDksMTA4Ljc1NCwyMzIuMjMxeiBNMjQyLjYwNCwyOTcuNDhsLTAuODAzLDQuMjQzbC0xLjM0NC0yLjU1MWwtMS41MDUsMC4xMmwtMy41OTEsMi41NjENCgkJCWwtMi42MjQsMC4yMTFsLTIuOTg2LDAuNjE1bC0xLjUzMS0wLjI1OGwtMS40NzEsMC40OThjLTAuMjUxLDAuMDE4LTAuNjM1LDAuMDQ3LTEuMTM3LDAuMDg3Yy0wLjUyMS0wLjIwNy0wLjg5Ni0wLjMwNC0xLjE1LTAuMjg3DQoJCQljLTIuMjY3LDAuMTgxLTQuMzIyLDEuMjMzLTYuMTg1LDMuMTUzbC0wLjc2LDAuMDZsLTIuMDkzLTIuNDk0Yy0zLjUyMSwwLjI4MS01LjYzLDAuODMzLTYuMzI5LDEuNjU4DQoJCQljLTAuNjg4LDAuODE5LTEuMTQ5LDMuMDM5LTEuMzY0LDYuNjQxYy0wLjMxNy0wLjc4OS0wLjc5NS0xLjk2My0xLjQyNC0zLjUzOGMtMC45NjMtMi42MDctMi45NjItMy43OTgtNS45NzgtMy41NTdsLTQuMzQ3LDIuNjIxDQoJCQljLTAuNjIyLTEuNDY4LTIuODIyLTIuMDUzLTYuNi0xLjc1NmMtMi4wMTMsMC4xNjQtMy4yNjcsMC4yNjUtMy43NzEsMC4zMDFsLTMuNTM0LDMuMzJsLTAuOTkzLTIuOTYybC03LjM3NS0yLjA2OWwtMy4yODMsMS43NzUNCgkJCWwtMC43NDksMC4wNmwxLjMyNy0yLjM3NGwtMC44MTktMC42OThjLTEuNzU4LDAuMTM3LTQuNDI3LTAuMDI3LTguMDExLTAuNTA1bC0wLjc4Mi0wLjMxN2wtMS44MDIsMS4yODdsLTYuNTYzLTEuMzgxbC0zLjMwMiwxLjQNCgkJCWMwLjA2LDAuNzU5LDAuMDQ4LDIuMjc3LTAuMDIzLDQuNTU4Yy0wLjA5NywxLjk0OS0wLjEwOCwzLjQwMy0wLjAzLDQuMzU2YzAuMDM1LDAuNDcxLDAuMjAyLDAuOTQyLDAuNDksMS4zOTQNCgkJCWMwLjAzNywwLjUwOSwwLjA3OSwxLjAxLDAuMTIsMS41MTJsLTIuMjY4LDAuMTgxYy0wLjM4OC0xLjc0OS0xLjIxNC00LjA4Ni0yLjQ1My03LjAzMWMtMS4yNS0yLjkzNi0yLjc3LTYuMTEyLTQuNTUyLTkuNTE2DQoJCQljLTEuNTYxLTMuNjc0LTIuNDk0LTUuODgxLTIuODA1LTYuNjE2bDAuNjMzLTEuNTY4bDEuNjAzLDEuMDFsMC43MDYtNS4zNzNsLTAuMDMtMC4zNzRjLTEuNjUtMS42NDYtMy4wMjEtMi45ODUtNC4xMjEtNC4wMzkNCgkJCWMtMS4wOS0xLjA2LTIuMjY4LTEuNTMxLTMuNTIzLTEuNDMxbC0zLjQxNyw0LjgyNGwyLjA5NSwyLjQ5OGwtMS43OTYsMS4yOGMtMi43NywwLjIyNC00LjMwMS0xLjU2Mi00LjYtNS4zMzYNCgkJCWMtMC4wNDItMC40OTUsMC4wNTUtMC44OSwwLjI5NC0xLjE2bC0wLjA2LTAuNzUzbC00LjgzNC0zLjQxYy0xLjc2NCwwLjEzOC0zLjU2NCwxLjM1Mi01LjQxMywzLjY1NA0KCQkJYy0xLjgzNywyLjMwNC0yLjgsNC40NzEtMi44OSw2LjQ5NmwxLjE5LDAuNjY2YzAuMjEtMC41MjEsMC41MjEtMS4zMDQsMC45NTEtMi4zNTFjMS4wMTgtMy4xMjMsMi40MDUtNC43NTgsNC4xNjQtNC44OTUNCgkJCWwwLjgxOSwwLjY5NWwtMC45ODEsMS45NzlsMS4xOTIsMC42NjJsLTEuNjUyLDMuMTczbDIuMjA3LTAuOTM0bC0wLjU0MywyLjY5MWwxLjE5NywwLjY2OWwwLjY0NiwzLjM3bDEuNDQ3LTAuODc2bDAuOTYzLDIuNTgxDQoJCQlsLTEuMzg3LDEuNjI1bC0yLjI5Mi0wLjE5bC0wLjUwMS0xLjQ3OGwtMS4xMzcsMC4wOWwtMy40NjQtNS40MjZsLTEuMzg5LDEuNjMxYzAuMTYyLDIuMDk3LDIuMTEzLDQuMzEsNS44NDYsNi42NDQNCgkJCWMxLjMzOSwwLjk0MiwyLjI4NSwxLjY1NSwyLjgyMywyLjE0bDEuMTA2LTAuNDg0bDEuMjU3LDEuNDc4bDEuMDQtMS4yMjhjMC43OTEsMC40NTIsMS44NzMsMS4yNDEsMy4yMzEsMi4zOTUNCgkJCWMxLjMzNCwwLjg5MywyLjE0MiwxLjQ1NCwyLjQxMSwxLjY4MmwtMS4zMzQsMi4zNjNsMi4yMDctMC45MjlsLTEuMjQ0LDMuNDc3bDEuODMxLTAuODkzbDAuNDAxLDAuMzQ4bDAuMDYsMC43NDINCgkJCWMtMC4yMzQsMC4yNTgtMC4zMjQsMC42MjItMC4yODgsMS4xYzAuMTQ5LDEuODk2LDAuNzQ3LDMuMDMzLDEuNzgyLDMuNDMxbC00LjE5Myw0LjUxMWwtMC4zNzgsMC4wMjkNCgkJCWMtMC40MjktMi4yNDMtMS44MTItNS4zMDMtNC4xNDYtOS4xNjdsMC45ODEtMS45NzlsLTEuMjg1LTEuNzk1bC0wLjE4MS0yLjI2OGwtMi41NDIsMS4zNDFsMC40NjEsMS4xMDYNCgkJCWMyLjk4NSw4Ljg4NCw0LjY3NywxNS44MzEsNS4wNzgsMjAuODY2YzAuMTIxLDEuNTAxLDIuNjI2LDQuMzM3LDcuNTA4LDguNTEzYzMuMzAzLDMuMjc5LDUuMzc5LDUuNTEsNi4yMzMsNi43MmwzLjQ4OSwwLjg1OQ0KCQkJYzAuMjI3LTAuMjY4LDAuODM3LTAuNTc4LDEuODI0LTAuOTA5YzIuMTgzLTEuMTg0LDMuNjA3LTIuMzA4LDQuMjktMy4zNzRsMC40MDYsMC4zNDJsMS40NzgtMC40OTVsMi43MDUsMC41NDhsLTEuMjA5LDMuODg5DQoJCQljMy45MDUsMS40NjEsOS43MDIsNC4yODksMTcuMzc5LDguNDg1YzIuOTA5LDEuNTEyLDUuODA0LDIuOTAyLDguNjg3LDQuMTYybDEuMTMtMC4wOWM0LjYzLDAuOTAyLDEwLjA4NywxLjEsMTYuMzc2LDAuNjA1DQoJCQljMy4wMTktMC4yNDEsNS4xNzktMSw2LjQ2Ni0yLjI4YzEuMjktMS4yOCwyLjM2LTIuOTAyLDMuMjIzLTQuODY1YzAuNjE1LTEuODIxLDEuNDI1LTIuNzY4LDIuNDMxLTIuODUyDQoJCQljMC43NTItMC4wNjEsMS44MTUsMC42MTUsMy4yLDIuMDIyYzEuMzc3LDEuMzgxLDIuODQ5LDIuNDQ3LDQuNDI2LDMuMmMxLjU3OCwwLjczNSwzLjg3MiwwLjk5Myw2LjkwMSwwLjc1Ng0KCQkJYzMuMDAyLTAuMjQxLDYuNzg3LTEuNzM1LDExLjM3MS00LjQ4N2M0LjU3LTIuNzU1LDYuNzQzLTUuNjIzLDYuNTA5LTguNjIyYy0wLjEyLTEuNTA4LTAuNjY1LTMuNDg3LTEuNjE4LTUuOTQxDQoJCQljLTEuMTg0LTIuMTktMS44MzUtNC4wMzItMS45NTItNS41NGMtMC4xNjQtMi4wMSwxLjAxLTQuNzYxLDMuNTE3LTguMjU1bDAuMzQ1LTAuNDA4Yy0wLjQyNS01LjMwNi0wLjY2OS05LjE2NC0wLjcyOS0xMS41ODENCgkJCWMtMC4wNy0yLjQwNCwwLjA5LTQuNTE3LDAuNDQ4LTYuMzI5TDI0Mi42MDQsMjk3LjQ4eiBNMjQ0Ljc0NCwyMTguMzk0bC02LjgxNCw1LjEwNWMyLjU0OC0yLjk4Niw0LjE5My02LjA5OSw0Ljk1NS05LjMyMQ0KCQkJYzAuNzYtMy4yMiwxLjIwNy03LjEyMiwxLjM1Mi0xMS42OTJjLTYuNDUzLTExLjEzMy0xMS4zMDgtMTkuNjAyLTE0LjU1MS0yNS40MjNsLTMuMDQ5LTAuMTM3DQoJCQljLTIuODA2LTAuMjgxLTQuOTY1LTAuMzY4LTYuNDc5LTAuMjQ4Yy02LjI4NiwwLjQ5OC0xMi42OTUsMS44OTktMTkuMjIyLDQuMTg5Yy02LjUyNSwyLjI5LTExLjQwNyw1LjMzNS0xNC42NTcsOS4xNA0KCQkJYy0xLjk4NSwwLjQxMS01LjQwNiwyLjAxLTEwLjI0Nyw0LjgwNWMtNC44NDIsMi43ODItNy44Myw0Ljk4MS04Ljk2Nyw2LjU5M2MtNC4wMjUsMC4zMjEtNi4xMTgtMC41MjEtNi4yODItMi41MzdsLTEuNjIyLTEuMzk1DQoJCQlsLTEuMDc2LDAuODVjLTIuMDUxLTAuMzQxLTcuMzY0LTAuMjk4LTE1LjkzNiwwLjEzYy01LjAzNywwLjM5OC04Ljg3MiwwLjYzNi0xMS41MjgsMC43MjZjLTIuNjUxLDAuMDg0LTQuMzc0LTAuMS01LjE2NC0wLjUzOA0KCQkJbC0xLjI3NCwzLjEzM2wtMS4xNi0wLjI5MWMtMi42MDgsMi4yMzctNS4xNzUsNS43OTgtNy43LDEwLjY4NmMtMi41MTgsNC44ODItMy42NjEsOC44MzMtMy40MTUsMTEuODU1bDIuODk1LTEuNzU5bDAuMzc2LTAuMDI5DQoJCQlsLTMuNzMzLDUuNjE2bDIuNzkzLDEuNjY5YzAuNywyLjQ4MywyLjgxMiw1LjIyOSw2LjM0Nyw4LjIzN2wtMi4wODEsMi40NDdsLTIuODI0LTIuMDU2bC0xLjczNSwyLjAzMmwtMS4wODgsNS40MDNsMy44NCw1LjM5Ng0KCQkJbDEuNzcyLTEuNjY1bC0wLjk4MSwxLjk3OWwwLjkzMywyLjIwM2wyLjE3OC0xLjMxN2wwLjQzLDAuNzM1bC0xLjcwNSwyLjQxYzEuNjI4LDEuMzkyLDIuNjA5LDIuNTg1LDIuOTQ0LDMuNTY3bC0wLjk0NCwyLjM1MQ0KCQkJbDEuODg0LTAuMTVsLTAuMjM0LDEuOTE2bDIuMzU3LDAuOTU2bDEuODU1LTAuNTMxbDIuMzg3LDEuMzM0bDUuMTkyLTEuNTU1bDAuODA4LDAuNjkxbDIuMTQ4LTEuNjg1bDAuNDcxLDEuMWwxLjgyNi0wLjkwOQ0KCQkJbDAuNzc3LDAuMzI0bDMuOTQyLTIuOTc5bDEuOTIxLDAuMjNsMi45MDItMS43NDVsMi42NjgsMC4xNjdjLTAuMDQyLTAuNTAyLDAuMDY1LTAuNzY2LDAuMzE4LTAuNzgyDQoJCQljMS4wMDQtMC4wOCwxLjU0OCwwLjM4MSwxLjYyNiwxLjM4MWMwLjIzMi0wLjI3MSwxLjE4My0xLjEwMSwyLjgzNS0yLjUwMWMzLjA2OC0yLjc3NSw1LjMwNi00Ljk3OSw2LjY4Ny02LjYxbDAuODU1LDEuMDcNCgkJCWMtMS42NDUsMS42NTgtMi44NjEsMy43NzQtMy42NjQsNi4zNzJjLTAuMzc0LDEuNzk5LTEuMDE3LDMuMjQzLTEuOTM5LDQuMzNjLTAuOTM1LDEuMDktMi44NDIsMi41MDEtNS43NDQsNC4yNmwwLjQzNiwwLjcxOQ0KCQkJbC03LjA5NCw2LjI2MmwwLjAxOCw0LjkzNWMxLjE0MiwxLjY4OCwxLjgxOSwzLjc4MiwyLjAxNiw2LjI5NmMwLjAxOSwwLjI1MS0wLjM3NywxLjY3NS0xLjE3OCw0LjI3bC0wLjI2NCwxLjU0NWw4LjA3OCwxLjI1Nw0KCQkJbDIuMjA2LTAuOTMzbC0xLjY0NS02LjMyOWwxLjA3Ni0wLjg1M2MxLjEyNSwxLjQzOCwxLjg4NSw0LjY2NywyLjI4NSw5LjY5OWw2LjI3NSwyLjUzN2MxLjc2Ni0wLjEzNywyLjUwOC0xLjk2OSwyLjIzNC01LjQ5Mw0KCQkJbDAuODA2LDAuNjk5bDAuOTczLDcuNTE2bDEuNDUxLTAuOTE2YzAuODEyLDAuNzM1LDEuNDc4LDEuMDgzLDEuOTc5LDEuMDRjMC40OTQtMC4wMzMsMS4zNy0wLjIzLDIuNjE0LTAuNTg1DQoJCQljMC45ODItMC4zMjgsMS43MjUtMC41MjEsMi4yMzMtMC41NjJsMS4yOTctMi43NTFsMi4xNTMsMy4yNDNsMC4wODcsMS4xM2MwLjUwNS0wLjAzNywwLjg5OSwwLjA2MSwxLjE3LDAuMjg3DQoJCQljMi4wNTMsMC4zNDIsMy41ODQsMC40NzIsNC41ODcsMC4zOTVsMy4zNzQtMC42NDJsMi4yMi01LjQxM2wzLjgxNCw0LjkyOWM0Ljc3NC0wLjM3NSw2Ljk5NS0yLjcxNSw2LjY1My03LjAwNQ0KCQkJYy0wLjAzMy0wLjUwMS0wLjI2OC0xLjc0NS0wLjY4Mi0zLjczN2MtMC40MDgtMi0wLjY1NS0zLjYyOC0wLjc1OS00Ljg4MmwxLjA0Ni0xLjIyMWMyLjMxMSwzLjcyMiw0LjA3Miw4LjM5Myw1LjI4OSwxNC4wMjkNCgkJCWw2LjAzOS0wLjQ4MWwzLjU1Ny0yLjk0Mmw3LjQxMiwyLjA2OWwyLjYwNC0wLjk2OWwwLjMwMi01LjczN2MwLjU1MSwwLjQ5OCwxLjE0OSwxLjY2NSwxLjgwMiwzLjUNCgkJCWMxLjAxMywzLjA3NiwyLjM5Nyw0LjU0Nyw0LjE2OSw0LjQwM2MxLjg5My0xLjQyNCwyLjk4Mi0zLjQ4NywzLjI3LTYuMjA5bDMuMDUsNS4zMjNsMi4yNzMsMC4yMDRsMC41MjQsMS44NTUNCgkJCWMtMC4xLTEuMjU4LDAuMDU3LTIuNTM4LDAuNDYyLTMuODM1YzAuMTY3LTEuMDQzLDAuMjM3LTEuNjg4LDAuMjIxLTEuOTQ2bC0yLjAxLTI1LjI3NWMtMC4xMzctMS43NjItMC43MDUtNC4xMTktMS43MDUtNy4wODENCgkJCWMtMC45MTYtMS45NDktMS4zODgtMy4xNzctMS40MzEtMy42ODVjLTEuMDQzLTAuNDIyLTIuNjE1LTEuMDU0LTQuNzA4LTEuOTA5Yy0zLjg4OC0xLjIwNC02LjcxNy0yLjU2Mi04LjQ4MS00LjA2Mg0KCQkJYy0xLjc2Ni0xLjUwOC0yLjgwNi00LjI3Mi0zLjEzLTguMjk4Yy0xLjA0Ni0wLjQyNS0yLjc4NS0xLjY3NS01LjIyNi0zLjc2MmMtMi43MDEtMi4wNjYtNC43MDQtMy40MjMtNi4wMjEtNC4wODJsMy43NDgtMC42NzYNCgkJCWMxLjc2OS0wLjE0NCw0LjIwOSwwLjE3NSw3LjMyOCwwLjkzNGwxLjcxOSwyLjUzbDAuNzM1LTAuNDQxbDAuOTA2LDEuODE5bDAuNjM5LTEuNTYybDAuNDQxLDAuNzIzbDAuMTgxLDIuMjY3bDEuMTMtMC4wOTENCgkJCWwtMC4xODgsMi4yODdsMS44ODYtMC4xNWwwLjM2OCw0LjUzbDEuMTIzLTAuMDlsMS4zMTEsMi4xNzZsMC4xMiwxLjUxNWw1LjU1NywzLjM1MWMyLjg4My0xLjc0OSw2LjMzNi0yLjc4MiwxMC4zNDUtMy4xMDYNCgkJCWw0LjA3OS0xNS41MDdMMjQ0Ljc0NCwyMTguMzk0eiBNMTY1LjkyOCwyMjUuNDA0Yy0xLjc0NSwzLjQzNC0zLjMxNiw2LjAyNC00LjY5NCw3Ljc3NmMtMS4zNzgsMS43NTYtMy4zMjgsMi43NDItNS44NDEsMi45MzkNCgkJCWMtMS41MTMsMC4xMi0zLjczMywwLjgwMi02LjY3LDIuMDQ2Yy0zLjE3OCwxLjUxOC01LjUxNywyLjM0MS03LjAyNCwyLjQ1N2MtMS41MDYsMC4xMjEtMy42MzYtMC40MDQtNi4zODktMS41ODQNCgkJCWMtMi43NTEtMS4xNzQtNS42MDUtMi43NzUtOC41NTQtNC44MjFjLTIuOTQ0LTIuMDQ2LTUuNDUtNC4xMjktNy41MTQtNi4yNDZjLTIuMDYzLTIuMTA1LTMuMTU4LTMuOTI1LTMuMjc4LTUuNDI2DQoJCQljLTAuMTYtMi4wMTYsMS4zMjItNS41NDcsNC40NjktMTAuNjA1YzMuMTQ3LTUuMDYyLDUuNTgyLTcuNzksNy4zMjktOC4xNzhjMi43MDUtMC45NzcsNS41Ny0xLjU4OCw4LjU5MS0xLjgyNQ0KCQkJYzEtMC4wNzcsMi41MzEsMC4wNTQsNC41ODIsMC4zOTVjMS44MjUsMC42MTUsMy4yMzYsMC44NzksNC4yNDMsMC44MDJjMC41MDEtMC4wNDMsMS4xMTgtMC4yMTcsMS44NTQtMC41MjcNCgkJCWMwLjc0Mi0wLjMxMiwxLjIzMi0wLjQ3MiwxLjQ4NC0wLjQ5NWMxLjc1OS0wLjEzOCw0LjU3LDAuMTQ0LDguNDE3LDAuODQzYzIuODI4LDAuNTQ1LDQuNzU4LDAuODk2LDUuNzg0LDEuMDYyDQoJCQljMC4yOTQsMC40ODEsMS4zNTQsMS44NTUsMy4xNzYsNC4xMTljMS44MTgsMi4yNTQsMi44NzksMy42MzEsMy4xNzMsNC4xMDljMC4wMTcsMC4yNTcsMC4yMjgsMS4yNSwwLjYyMiwyLjk5NQ0KCQkJYzAuMDk0LDEuMjUxLDAuMTg0LDIuMzgxLDAuMjY4LDMuMzk0QzE2OS4wMjYsMjE5LjcyMSwxNjcuNjg2LDIyMS45NzgsMTY1LjkyOCwyMjUuNDA0eiBNMTI1LjczMiwyOTcuNzA4bC0wLjM3NiwwLjAzDQoJCQlsMC42NjktMS4xODRsMC4zNjYtMC4wM0wxMjUuNzMyLDI5Ny43MDh6IE0xMjIuMjc1LDIzOS44OTVsMC4wODgsMS4xM2wtMC43NDcsMC4wNjFsLTAuMzgzLDAuMDNsLTAuMTIxLTEuNTE1DQoJCQljLTAuMDIzLTAuMjUxLDAuMzQ4LTAuNDA0LDEuMTAyLTAuNDY1bDAuMDMsMC4zNzhMMTIyLjI3NSwyMzkuODk1eiBNMTI2LjI5MywyOTAuNDUzbC0wLjQxMS0wLjM0OGwwLjMyMy0wLjc4OWwwLjQxMywwLjM1MQ0KCQkJTDEyNi4yOTMsMjkwLjQ1M3ogTTEzMC4yMTIsMjQ0LjE5N2MtMC4yNTYsMC4wMTctMC45MzMtMC41NjQtMi4wNC0xLjczNWMtMS4zMzQtMC45MDktMi4xMjktMS4zNi0yLjM4LTEuMzM0bC0xLjEzMiwwLjA4Nw0KCQkJYy0wLjQ4MywwLjI5NS0wLjg1NCwwLjQ1Mi0xLjEsMC40NjlsLTAuMDktMS4xMzFjLTAuMDQyLTAuNTAxLDAuMzExLTAuNzg1LDEuMDcxLTAuODQyYzAuNTAxLTAuMDM3LDEuODA3LDAuNTU1LDMuOTM3LDEuNzc1DQoJCQljMi4xMjMsMS4yMjcsMy4zMzIsMi4wNzYsMy42MTksMi41NjFMMTMwLjIxMiwyNDQuMTk3eiBNMTMyLjc2NywzMjQuMTIxbC0xLjEzLDAuMDlsLTAuMDYtMC43NjNsLTAuNDA2LTAuMzQ0bC0wLjE0OS0xLjg5Mw0KCQkJYy0wLjA2LTAuNzQ1LDAuNjI3LTEuNTY4LDIuMDg2LTIuNDM0bDEuMDk1LTAuNDcyYzAuMDc5LDEuMDAzLDAuMzgzLDEuNjE1LDAuOTEsMS44MjJsMC4wOSwxLjEzM0wxMzIuNzY3LDMyNC4xMjF6DQoJCQkgTTEzNC43NzEsMzI1LjQ3MmMtMC4yNSwwLjAyLTAuMzUzLDAuMjg3LTAuMzE2LDAuNzg5bDAuNDA2LDAuMzQxYzAuMjkyLDAuNDkxLDAuNDQ4LDAuODU1LDAuNDY2LDEuMTA2DQoJCQljMC4wMTksMC4yNTQtMC4zMTcsMC43ODYtMS4wMTEsMS41OTlsLTEuMTMsMC4wOWMtMC4wMTktMC4yNTEtMC4wNjUtMC44NzktMC4xNDktMS44ODZjLTAuMzE3LTAuNzM1LTAuNDczLTEuMjI0LTAuNDk3LTEuNDc4DQoJCQljLTAuMDM3LTAuNTAyLDAuNDI1LTEuMDQ3LDEuMzg4LTEuNjMybDAuNzI0LTAuNDMybDAuNDY2LDEuMDk3TDEzNC43NzEsMzI1LjQ3MnogTTEzOC4wMzIsMzA0LjMzMQ0KCQkJYy0wLjAxOS0wLjI1MS0wLjI5OS0wLjQ4NC0wLjgyMS0wLjY5NWMtMC41NjItMC43MTItMC44NTQtMS4xOTctMC44NzMtMS40NTRjLTAuMDIzLTAuMjUxLDAuMjk5LTEuMDMzLDAuOTUxLTIuMzUxbDAuMzIyLTAuNzg5DQoJCQljMC44NjgsMS40NjEsMS4zMjksMi40MzEsMS4zNzEsMi45MzNsMC4xNzksMi4yNjdMMTM4LjAzMiwzMDQuMzMxeiBNMTM2LjE3NywyODUuODc2bC0wLjA4OS0xLjEzN2wwLjc1OS0wLjA2MWwwLjA5LDEuMTMNCgkJCUwxMzYuMTc3LDI4NS44NzZ6IE0xMzguNDYyLDI5MC42MjNjLTAuNDksMC4yODgtMC43MTcsMC41NjgtMC42OTksMC44MTZjLTAuNTM4LTAuNDYyLTAuODQ0LTEuMDY2LTAuOTA0LTEuODMybC0wLjA4OC0xLjEzMQ0KCQkJYy0wLjA3OS0wLjk5OSwwLjExNC0xLjc3MSwwLjU3My0yLjMybDEuMTMyLTAuMDljMC4yNzQsMC4yNDEsMC40MjQsMC40NzksMC40NDEsMC43MjlsMC4xNSwxLjg4Ng0KCQkJQzEzOS4xMDgsMjg5LjE3NiwxMzguODk5LDI4OS44MzQsMTM4LjQ2MiwyOTAuNjIzeiBNMTM5LjI4MiwzMDUuNzU2bC0wLjEyLTEuNTE1bDAuNzU0LTAuMDYxbDAuMTIxLDEuNTE1TDEzOS4yODIsMzA1Ljc1NnoNCgkJCSBNMTQzLjYxOSwzMjIuMTE0bC0wLjc4NC0wLjMybC0wLjAzLTAuMzc4bDEuMTYyLDAuMjg3TDE0My42MTksMzIyLjExNHogTTE0NS45NDEsMzMyLjE4NWMtMC41NTItMC40NjEtMS4xMzItMS40MzEtMS43NDctMi45MDENCgkJCWMtMC42MjgtMS40NjUtMC45NTgtMi40NTQtMS0yLjk1NmMtMC4wMTktMC4yNTEsMC4wNjUtMC43NTksMC4yNTctMS41NDVjMC4xNjctMS4wMiwwLjI1LTEuNjY4LDAuMjI4LTEuOTEyDQoJCQljMC44MzEsMC45NDYsMS42NzUsMi4wMTcsMi41MzEsMy4yMmMwLjg2MSwxLjE5LDEuMzE1LDIuMTc3LDEuMzc2LDIuOTI2QzE0Ny42ODgsMzMwLjI3LDE0Ny4xMzYsMzMxLjMyOSwxNDUuOTQxLDMzMi4xODV6DQoJCQkgTTEzNS42MjIsMTU0LjUyNWMtMC4yNTIsMC4wMi0wLjYxNywwLjMwMS0xLjA3OCwwLjg1M2wtMC4zNTMsMC4zOThsMS41Mi0wLjExN0wxMzUuNjIyLDE1NC41MjV6IE0xNDQuMzE5LDI0NC45NjdsLTAuMzcxLDAuMDI5DQoJCQlsMC42MzQtMS41NjFsMC4zODMtMC4wM0wxNDQuMzE5LDI0NC45Njd6IE0xMzguNTQ1LDE1My4xNTFsLTAuNjY0LDEuMTk3bDAuNDA4LDAuMzUxbDAuNjY4LTEuMTk3TDEzOC41NDUsMTUzLjE1MXoNCgkJCSBNMTQ3LjY1OCwyNDMuOTQzYy0wLjIyOCwwLjI3Ny0wLjQ3MywwLjQyMS0wLjcxOSwwLjQzOGwtMS4xNjctMC4yODhjLTAuMDc3LTEsMC4zODQtMS41NDUsMS4zODktMS42MjgNCgkJCWMwLjI1MS0wLjAxNywwLjY0LDAuMDgsMS4xNjcsMC4yODdsMC4zNzYtMC4wM2wwLjA2LDAuNzU2QzE0OC41MywyNDMuNzUzLDE0OC4xNTksMjQzLjkxLDE0Ny42NTgsMjQzLjk0M3ogTTI2Ny44ODcsMTE1LjM2OA0KCQkJYy0xLjAwMy0xLjMzMS0yLjI0Ny0xLjkyOS0zLjc1OC0xLjgwOWMtMS41MTIsMC4xMjEtNi4wOTIsMy4wMjItMTMuNzM0LDguNjkzYy0xMS40ODEsOC41MDUtMjIuNTU1LDE1LjcxNy0zMy4yMjcsMjEuNjI1DQoJCQljLTEwLjY2OSw1LjkxNy0yMS43ODksOS4zMjgtMzMuMzU0LDEwLjI0NGwtMC43ODItMC4zMTFsLTEuNzcyLDEuNjU1bC0yLjAwOS0xLjM1N2wtNS42MjQsMC44MjYNCgkJCWMtNC41MzcsMC4zNTctMTAuNTEyLDAuMDczLTE3LjkxNy0wLjg1Yy02LjY0Ni0wLjc0OS0xMS42LTAuOTc5LTE0Ljg2Ni0wLjcyMmwtMS4xMzIsMC4wODdsMi4wMDQsMS4zNjFsLTAuNjMzLDEuNTc4bDQuMDMyLTEuODQ5DQoJCQlsMS45NzQsMC45ODZsMS40MTctMS4yNTdsMC43ODksMC4zMjRsMC4xMiwxLjUwMWw0LjQzNC0xLjQ4NWwxLjIyNiwxLjAzN2wxLjQ3OC0wLjQ5MWwwLjQxMywwLjM0MWwtMC4yMzIsMS45MjJsMy42ODUtMS40MzgNCgkJCWwxLjU5OCwxLjAxNmwyLjIzNi0wLjU1NWwwLjE1MSwxLjg4NmwzLjY3Ny0xLjQzOGwxLjIyOCwxLjA0NmwyLjkyNi0xLjM3NGwwLjg0MiwxLjA3bDIuOTMzLTEuMzcxbDEuMjIxLDEuMDQzbDEuODMyLTAuODk5DQoJCQlsMS41NjQsMC42MjlsMi41NTUtMS4zNDFsMS4xODksMC42NjZsMi4yMzMtMC41NTVsMC4xNDcsMS44ODJsMi44NDItMi41MDdsMC43ODYsMC4zMjRsMC4xMTYsMS41MDFsMC43NTYtMC4wNmwyLjQ2OC0yLjQ2NA0KCQkJbDAuODY5LDEuNDQ4bDIuNDkxLTIuMDkzbDIuMDM5LDEuNzM1bDIuODA1LTIuODg2bDEuMzQ4LDIuNTUxbDUuMjkzLTQuOTcybDAuODc2LDEuNDQ4bDMuNTg0LTIuNTU0bDEuMTU2LDAuMjg4bDYuMTIyLTMuODkyDQoJCQlsMC45MzMsMi4xOWwzLjQ5LTMuNjc4bDEuMjExLDEuMDRsMy4xODMtMy4yNzZsMC44MzksMS4wNjNsMy45MDktMy43NDVsMS41NDEsMC4yNTdjMC40NjUtMC41MzgsMS4wNDYtMS4yMiwxLjc0OC0yLjA0Ng0KCQkJYzAuNzE2LTAuNTYyLDEuMzExLTEuMTIsMS43NzUtMS42NjJsMC44NjYsMS40NDhsMy40ODMtNC4wNzZsMC41MjEsMS44NTVjMC45My0xLjAzNywyLjM0NC0yLjM0Nyw0LjI0Ni0zLjk0Mg0KCQkJYzEuNjY1LTEuMzQxLDIuNzI5LTIuMjY3LDMuMi0yLjc4MmwwLjgwOSwwLjY1MmwzLjE3LTMuMTM2bDEuMTM0LTAuMDlsMi40ODctMi4xMDZsMS4xNiwwLjI4MWwxLjcwNS0yLjQxbDEuNjMxLDEuMzk0DQoJCQlsMy4xNTMtMy4zMDdsMC44MjIsMC42OTlsMS4wNy0wLjg0OWwxLjE2LDAuMjg4QzI2OS40MjgsMTE4LjA5OSwyNjguODY2LDExNi42NzUsMjY3Ljg4NywxMTUuMzY4eiBNMTY4LjAxNCwyMzIuNDUyDQoJCQljLTEuMjk3LDIuODk2LTIuMjgsNC44NzUtMi45NDksNS45MzVjLTEuMDEsMC4wNzctMi4yMiwwLjgxMi0zLjYxNywyLjE4NGMtMS42MjgsMS45MDgtMy42OTIsMi45NTUtNi4yMSwzLjE1MmwtNC45MDcsMC4zOTINCgkJCWwtMC4wNTgtMC43NTZjLTAuMDI1LTAuMjUxLDAuMTk3LTAuNjM5LDAuNjYzLTEuMTljMC40ODUtMC4yODcsMC43MTItMC41NjgsMC42OTQtMC44MTJsMS4yMiwxLjA0DQoJCQljMC40NjItMC41NDUsMy4wMDMtMi4wMSw3LjYyOC00LjM5NmMyLjY2OC0xLjQ5MSw0LjM2Ni0yLjM4MSw1LjA5Ni0yLjY4OGMwLjcxOS0wLjU2MiwxLjM2NC0yLjAwOSwxLjkzOC00LjMyOQ0KCQkJYzAuNTM1LTIuODI5LDEuNDA0LTQuNjc0LDIuNTk1LTUuNTI3YzAuMjcxLDAuMjMxLDAuNDM1LDAuNjAzLDAuNDc1LDEuMTA3QzE2OS45MDYsMjI3LjYxOCwxNjkuMDQzLDIyOS41ODcsMTY4LjAxNCwyMzIuNDUyeg0KCQkJIE0xNTcuODU2LDI4MS40ODljLTIuMDkzLTAuODQ5LTMuMTc2LTEuNzY5LTMuMjYtMi43ODFjLTAuMDYtMC43NTMsMC4yNzYtMS4yODcsMS4wMTctMS41OTJjMC4yNywwLjIyOCwwLjY4OCwwLjcwMiwxLjI1LDEuNDExDQoJCQljMC41NjMsMC43MjYsMC45ODEsMS4xOTMsMS4yNTgsMS40MjRMMTU3Ljg1NiwyODEuNDg5eiBNMTYxLjUyNCwzMTguMDI5bC0xLjEzNywwLjA5Yy0wLjU4NS0wLjk2My0wLjg5OS0xLjY5MS0wLjkzMy0yLjINCgkJCWMtMC4xMDEtMS4yNTcsMC4zODEtMy4xOTYsMS40MzgtNS44MTFsMC4wODcsMS4xM2MwLjA2LDAuNzU2LDAuMjU3LDEuNjI5LDAuNTg4LDIuNjExYzAuMTAxLDEuMjYxLDAuMTYxLDIuMDE3LDAuMTc4LDIuMjY3DQoJCQlDMTYxLjgyOCwzMTcuMTIsMTYxLjc1MiwzMTcuNzYyLDE2MS
Related
I currently have a SVG in a url, that I want to render in Angular via HTML. Because the block I'm trying to render the SVG in is in a for loop, I'm trying to dynamically render the SVG via a URL reference, like below:
Our app has AngularJS AND Angular6, and I was able to render the SVG via url in the AngularJS side using the object tag with ng-attr-data="svgUrl".
I've tried different combinations of img tags and object tags with the newer syntaxes, but am unable to get it to render like in AngularJS.
<div class="row checkout-items mb-3" *ngFor="let item of orderSummaryModel.items">
//For rendering PNG, works fine
<img *ngIf="!item.color.imageFeatured.includes('mockupSvg')" class="product-image img-fluid" [src]="item.color.imageFeatured" nopin="nopin">
//Trying to render SVG here via url
<object *ngIf="item.color.imageFeatured.includes('mockupSvg')" [attr.xlink:href]="item.color.imageFeatured" type="image/svg+xml"></object>
</div>
The expected result is that the SVG renders, where item.color.imageFeatured is a SVG url. It's currently showing up as blank, with a empty #document, although the SVG url renders fine when opened separately in a browser.
Figured it out guys, turns out that angular has built in XSS defense mechanisms causing the rendering to fail. Fixed by using a sanitizer on the url.
The <object> element doesn't have an xlink:href attribute.
I think you likely meant:
<object *ngIf="item.color.imageFeatured.includes('mockupSvg')"
[data]="item.color.imageFeatured" type="image/svg+xml"></object>
I usually put the svg I want to animate using javascript inline, or I cant get one of its node, whether it is by id or class, or using jquery or vanilla JS.
Is there a way to query an SVG node if it is not inline?
With an object, I can't get it to work.
<object type="image/svg+xml" data="/assets/images/logo.svg">
<img src="/assets/images/logo.png" alt="">
</object>
My javascript file is called at the end of the body node and I wrapped my code in a $(document).ready() function.
EDIT: the svg dom nodes are indeed in the page code, but when I try a console.log(document.getElementById("item_id")) it doesn't return anything, both on Chrome and Firefox, with ubuntu.
Your graphics should be part of your page's DOM, and visible to javascript, if your out-of-line <svg> object is loaded with an <object> tag.
But not if you load it with an <image> tag.
(Chrome).
I've got an .svg file with some code in it.
If I just put that code in my HTML with the <svg> tag it works fine.
The problem is is that I've got quite a lot of code in my .svg and I don't want to put all that code in my HTML. So I've made an .svg file and tried to link it, but it didn't seem to link.
Does anyone know how I'm supposed to link an .svg file to a HTML file?
The easiest (and probably most correct) way of doing this is to simply put your SVG file as src in an <img> tag as if it were any other format.
Keep in mind that this might not work in some older browsers (this is the problem is general with SVG, not just with using it in an img tag).
Another option is using it inside an <object> tag, as seen in this article (which also breaks down the two options and the drawbacks of both):
<object type="image/svg+xml" data="kiwi.svg" class="logo">
Kiwi Logo <!-- fallback image in CSS -->
</object>
In this case, your retain the ability to affect the parts of your SVG with CSS - which may or may not be what you want.
I would usually use it inside an using <img src="link to svg file" />
<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+PHN2ZyB3aWR0aD0iMzAiIGhlaWdodD0iMzAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGc+PGNpcmNsZSBpZD0iY2lyY2xlIiBmaWxsPSJub25lIiBzdHJva2U9IiMzMzMiIHI9IjE0IiBjeD0iMTUiIGN5PSIxNSIvPjxjaXJjbGUgaWQ9ImRvdCIgZmlsbD0iIzMzMyIgc3Ryb2tlLXdpZHRoPSIwIiByPSIxIiBjeD0iMTUiIGN5PSI3LjUiLz48cGF0aCBpZD0iaSIgZmlsbD0iIzMzMyIgc3Ryb2tlLXdpZHRoPSIwIiBkPSJtMTIuNSwxMS41bDMuNSwwbDAsMTFxMCwwLjUgMC41LDAuNWwxLDBsMCwxbC01LDBsMCwtMWwxLDBxMC41LDAgMC41LC0wLjVsMCwtOS41cTAsLTAuNSAtMC41LC0wLjVsLTEsMGwwLC0xeiIvPjwvZz48L3N2Zz4=" />
How to Add Scalable Vector Graphics to Your Web Page
for example you can use :
<object type="image/svg+xml" data="image.svg">Your browser does not support SVG</object>
I have successfully filled my SVG path with an image using this little trick:
Fill SVG path element with a background-image
However, when I load the svg file in my html page using background: url(), it doesn't show up.
Here is my svg image opened in browser:
And here is the same svg image on my html page:
Does anyone know what might be going on here? Thanks.
SVG files loaded into <img> or as a background-image have to be completely self-contained. They cannot refer to external files (as in the image you are loading into your pattern).
What you can do to work around it is to embed your pattern image as a Data URI".
<image xlink:href="data:image/jpeg;base64,..." .../>
On my site I embed a few SVG files, and the file they display is changed by JavaScript (CoffeeScript). I use an <object> tag to embed the file.
The code to change the file looks like this:
element.querySelector("object").data = "assets/images/#{icon}"
This all works fine in Chrome, but in Firefox and Safari, sometimes the SVG files don't display, while the data attribute of the object is set.
If I use the setAttribute method, it takes a while for the images to show up.
element.querySelector("object").setAttribute "data", "assets/images/#{icon}"
Is there something I'm doing wrong?