CODEWITHSUNDEEP
htmlcsssvg
scripter
scripter

Reputation: 1526

How to use svg in html?

I tried to save the background-image of a site. When I clicked on view background image a new page opened with the exact image. but I am not able to save it. I haven't much idea of svg file formats. Could you tell me how this works. Below is the url of that image. Seems like the url has the code of it.

  data:image/svg+xml,<svg xmlns%3D"http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" xmlns%3Axlink%3D"http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink" version%3D"1.1" x%3D"0px" y%3D"0px" width%3D"1180px" height%3D"960px" viewBox%3D"20 0 1180 960" enable-background%3D"new 20 0 1180 960" xml%3Aspace%3D"preserve"><style>.style0{fill%3A%09%23257A80%3B}.style1{stroke-linejoin%3A%09round%3Bstroke%3A%09%2342372F%3Bstroke-linecap%3A%09round%3Bstroke-miterlimit%3A%0910%3Bstroke-width%3A%0930%3Bfill%3A%09none%3B}.style2{fill%3A%09%235B4C41%3B}.style3{stroke-linejoin%3A%09round%3Bstroke%3A%09%2368574A%3Bstroke-linecap%3A%09round%3Bstroke-miterlimit%3A%0910%3Bstroke-width%3A%0920%3Bfill%3A%09none%3B}.style4{stroke-linejoin%3A%09round%3Bstroke%3A%09%235B4C41%3Bstroke-linecap%3A%09round%3Bstroke-miterlimit%3A%0910%3Bstroke-width%3A%0914%3Bfill%3A%09none%3B}.style5{fill%3A%09%234D2A0B%3B}.style6{fill%3A%09%2317A89E%3B}.style7{fill%3A%09%235DC2BB%3B}.style8{stroke-linejoin%3A%09round%3Bstroke%3A%09%2341362F%3Bstroke-linecap%3A%09round%3Bstroke-miterlimit%3A%0910%3Bstroke-width%3A%0940%3Bfill%3A%09none%3B}.style9{stroke-linejoin%3A%09round%3Bstroke%3A%09%2368574A%3Bstroke-linecap%3A%09round%3Bstroke-miterlimit%3A%0910%3Bstroke-width%3A%0930%3Bfill%3A%09none%3B}<%2Fstyle><circle cx%3D"820" cy%3D"460" r%3D"90" class%3D"style0"%2F><path d%3D" M990 630H860c-22 0-40-18-40-40v-70" class%3D"style1"%2F><rect x%3D"970" y%3D"430" width%3D"40" height%3D"450" class%3D"style2"%2F><path d%3D" M1000 670h90c16.5 0 30-13.5 30-30V540" class%3D"style3"%2F><path d%3D" M990 780h-70c-11 0-20-9-20-20v-40" class%3D"style4"%2F><circle cx%3D"990" cy%3D"430" r%3D"20" class%3D"style5"%2F><circle cx%3D"990" cy%3D"350" r%3D"150" class%3D"style6"%2F><circle cx%3D"1120" cy%3D"510" r%3D"80" class%3D"style7"%2F><circle cx%3D"900" cy%3D"690" r%3D"60" class%3D"style6"%2F><circle cx%3D"450" cy%3D"510" r%3D"150" class%3D"style0"%2F><path d%3D" M320 720h80c27.5 0 50-22.5 50-50v-60" class%3D"style8"%2F><rect x%3D"270" y%3D"360" width%3D"60" height%3D"600" class%3D"style2"%2F><path d%3D" M290 600H170c-22 0-40-18-40-40v-90" class%3D"style9"%2F><circle cx%3D"300" cy%3D"360" r%3D"30" class%3D"style5"%2F><circle cx%3D"300" cy%3D"220" r%3D"220" class%3D"style6"%2F><circle cx%3D"130" cy%3D"410" r%3D"110" class%3D"style7"%2F><%2Fsvg>

Upvotes: 1

Views: 140

Answers (3)

FixerRB
FixerRB

Reputation: 326

Copy everything after the "," to any URL decoder (this for example) and press "Decode". This will replace all url-encoded characters to their actual values, then you can copy the result to the .svgfile and open it.

Upvotes: 1

i7nvd
i7nvd

Reputation: 1318

SVG stands for Scalable Vector Graphic. It's XML code that defines shapes in mathematical ways so that they can scale infinitely, not relying on pixels to render. Thus, they can display very large, or very small, and still look great.

What you have there is a bunch of SVG code that's been encoded to strip out all non-valid text elements, like slashes, equals signs and more.

So how can you save this as an image? If you want to be able to open it just as a regular image file, you'll need to convert it to a regular image file. That would mean decoding the SVG code that you have there, saving that as a text document, opening it up in vector-editing software, and exporting as a PNG or JPG.

Upvotes: 1

Cecilio Pardo
Cecilio Pardo

Reputation: 1717

Yes, its an embedded file, which you can use like that on the src attribute of an image. Open it in firefox and do File/Save.

Upvotes: 1

Related Questions