First, when you try to insert an SVG image the usual way, by using the image-insert feature, quite often SVG isn't a recognized format. Blogger, for example, expects images to be GIF, PNG, JPEG, etc. If you try to "place" an SVG image in your blog, the upload won't be accepted.
Shame on Google.
But that's okay, because SVG is just markup, right? And you can put markup inline with your HTML using the edit-raw-HTML mode of the editor widget. It turns out all browsers except Internet Exploder honor raw SVG embedded inline in HTML. For an example, see the source code for this page (the above image was inlined).
But there's a problem. Blogger's editor widget, upon seeing any self-closed tag that it doesn't recognize, such as <g/>, will try to convert it to <g></g>.(even though self-closing tags are perfectly legal, and Blogger itself honors such examples as <br/>.) What's worse, though, is that if Blogger encounters a run of self-closing tags, such as
<use xlink:href="#123" x="1" y="2"/>
<use xlink:href="#123" x="14" y="23"/>
<use xlink:href="#123" x="51" y="52"/>
it will try to convert it to
<use xlink:href="#123" x="1" y="2">
<use xlink:href="#123" x="14" y="23">
<use xlink:href="#123" x="51" y="52">
</use></use></use>
which is, of course, wrong, because this creates nested elements where no nesting existed before.
Nine times out of ten, inlined SVG just doesn't render properly in Blogger pages. (And usually, it's because of the problem I just mentioned: self-closing tags.) Bigtime Fail.
The answer is to expand every self-closed tag in your SVG to formal end-tag form—which is impracticable to do by hand in anything but a trivially small SVG file.
I took a crack at solving this problem using regular expressions. The idea is to write a regex that matches self-closing tags, then use the String replace() method to fix everything. It took me an hour of messing around to stumble onto a solution. The code seems to work, although I can't guarantee it's formally correct or will work in every single case.
The regular expression I came up with is:
var globalPattern =
/<([a-zA-Z0-9\-]+)([^/>]*)\/>/g;
This charming little monstrosity tries to match an angle bracket followed by an element name composed of any combination of letters and numbers and hyphens (all legal in XML), followed by anything that's not a forward slash or a closing angle bracket; and then finally it looks for the closing bracket.
To apply this to an SVG page that's loaded in the browser, you have to get the raw source for the page, which isn't hard to do, programmatically, providing you know the following trick:
function getMarkup( node ) {
return new XMLSerializer().serializeToString( node );
}
Pass document.getElementsByTagName("svg")[0] to this function and you'll be just fine.
Now you need a function that will transform your raw markup to formal closing-tag form. This is what I came up with:
function fixSelfClosingTags( markup ) {
var globalPattern =
/<([a-zA-Z0-9\-]+)([^/>]*)\/>/g;
var pattern =
/<([a-zA-Z0-9\-]+)([^/>]*)\/>/;
var count = markup.match(globalPattern).length;
for(var i = 0; i < count; i++){
var len = markup.match( pattern )[0].length-2;
markup = markup.replace( pattern, markup.match(pattern)[0].substring(0,len) +
"></" + markup.match(pattern)[1] + ">");
}
return markup;
}
Okay, so it isn't pretty. It's the best I could come up with (that seems to work) on short notice.Once you've converted your SVG to formal closing-tag syntax, it can be inlined in a Blogger (or other) web page, and it should render just fine.
Too bad Blogger doesn't make it easier for you to use SVG. Scalable Vector Graphics has been around for almost 20 years. It's time for it to be granted first-class web citizenship, don't you think?
Thanks for the hints.
ReplyDeleteWe'll try to set up a Public 'svg -> converted to Blogger' page.
If successful, will post it here.
Great Article IoT Projects for Students
DeleteDeep Learning Projects for Final Year
JavaScript Training in Chennai
JavaScript Training in Chennai
The Angular Training covers a wide range of topics including Components, Angular Directives, Angular Services, Pipes, security fundamentals, Routing, and Angular programmability. The new Angular TRaining will lay the foundation you need to specialise in Single Page Application developer. Angular Training
I love SVG files and found this article while googling how to add them to a blog (I have seen plenty SVG images online and I had just assumed that you should be able to add them). This, however, has blown my mind. More complicated than I would have liked, but I might give this a try some day!
ReplyDeletehttp://www.indotheta.com/2017/01/pengertian-lengkap-sistem-informasi.html
ReplyDeletePengertian sistem informasi komputer,manajemen,akuntansi menurut para ahli.
ReplyDeletei have read fully about your posted information. i got some useful ideas from yours. as a web design supporter i got how you are managing effect of school developemt and manging puipil. keep follow more information from yours.
ReplyDeleteNew Zealand education Consultants in Chennai
Thanks, I like the way you explain things...a couple of sentences with clarification and examples. It makes it easier for me to understand.
ReplyDeleteOh yeah, I especially like how you noted the pitfalls you run into and how to fix them...I, of course, ran into the same ones you mentioned.
DeleteExcellent information. Very interesting to read. I really love to read such a nice post.
ReplyDeleteinfinite logo design
logo design app
Ready for an upgrade, there are Yola also money by immediately best dishwasher boil down to individual preference, best rated dishwashers all the most up to date bells as well as whistles. dishwasher reviews choose a dishwasher with a decibel ranking official website dishwasher also includes a self-cleaning filter.
ReplyDeleteYes Indeed, blogger cannot detect self closing tags of SVG items. Therefore it converts them into other tags. Eventually, it ruins the SVG image. On the other hand there is huge lack of SVG hosting services in the internet. This article shows a wonderful effort to overcome that problem. Thanks for sharing!
ReplyDeleteIt was good explanation and wonderful content. Keep posting...
ReplyDeleteIELTS Coaching in Chennai
IELTS Training in Chennai
German Classes in Chennai
Japanese Classes in Chennai
Spoken English Classes in Chennai
TOEFL Coaching in Chennai
IELTS Coaching in Adyar
IELTS Coaching in Velachery
Online religion research paper writing services are very difficult to complete and many students are always searching for Religion Research Paper Services companies to help them complete their custom religion essay writing services.
ReplyDeleteThere are many cultural studies paper writing services and Cultural Studies Research Paper Services to choose from for those stuck with their cultural studies coursework writing services and research papers on cultural diversity.
ReplyDeleteشركة نقل عفش بالدمام
ReplyDeleteشركة نقل عفش بالمدينة المنورة
شركة نقل عفش بجدة
شركة نقل عفش بمكة
شركة نقل عفش بالطائف
شركة نقل عفش بالرياض
شركة نقل عفش بينبع
نقل العفش والتخزين
ReplyDeleteشركات تنظيف خزانات بجدة
نقل عفش بالخبر
شركة نقل عفش بخميس مشيط
شركة نقل عفش بالاحساء
شركة نقل عفش بجدة
نقل عفش بالمدينة المنورة
نقل عفش بالطائف
شركة نقل عفش بشرورة
ReplyDeleteكيفية نقل العفش بينبع
اسعار نقل عفش بينبع
البحث عن شركات نقل العفش بينبع
شركات نقل العفش بخميس مشيط
كيفية نقل العفش بخميس مشيط
اسعار نقل عفش بخميس مشيط
I feel not familiar with SVG in Blogger, and I was looking a way out. Luckily I was told about this page by Dissertation Writing Services experts and I think this is gonna help me.
ReplyDeleteشرکتی با سابقه هست و از شرکت های قدیمی و معتبر و به روز هاستینگ ایران محسوب می شود .
ReplyDeleteشرکت هاست پشتیبانی بسیار خوبی دارد و از بهترین پیشنهاد ها برای خرید هاست ارزان و هاست فوق ارزان هست گویا لرن
Complete Your Assignment From
ReplyDeleteEngineering Assignment Help
Complete Your Assignment From
ReplyDeleteSydney Assignment Help
Nice content keep on the good work Xandertech.com.ng Is a site for updates related to BLOGGER,DATA CHEATS, ADSENSE TIPS, JAVASCRIPT, SEO, LATEST TECH NEWS,TIPS, BANKING, BLOGGER AND WORDPRESS PREMIUM TEMPLATE, PHONE REVIEWS, HOW TO TIPS, AND NEWS. WE ALSO SELL BLOGGER TEMPLATE AND WORDPRESS SCRIPTS visit for more.
ReplyDeleteComplete Your Assignment From
ReplyDeleteEngineering Assignment Help Australia