Hello guest, welcome to Friendosphere, the community can't wait for your contribution.

How does SVG work on web pages

+1 vote
745 views
asked Aug 18 in Web design by Okwyee Q & A Ninja (610 points)
edited Aug 19 by DanielTheGeek

I'm a graphic designer and I've learnt a bit of HTML in the past so accidentally, while i was working on illustrator, I copied a vector art and pasted it in a text field - accidentally!
What i saw was some markup codes in the text field surprise. Happened a couple of times after so i decided to recreate a page on Behance, Then i copied the vector art (text were converted to outlines too) then i pasted it in sublime text, I saw something like:

!---source- illustrator //blah blah blah.
<svg>
--183 code lines
</svg>

Saved it as .HTML and load it on my browser, and surprisingly, It worked.

- Result


My question: can SVG be used in place of HTML?
Looks like an easy way to design a web page without writing CSS/HTML (except that outline text makes the code lines enormous 150 lines were from the text in this case). Have anyone been using this method to design web pages? What's your experience with it?
Lastly is there anyway i can export a doc as .html in illustrator?
If at all this method works, It's dope!

1 Answer

0 votes
answered Aug 19 by DanielTheGeek Q & A Ninja (1,310 points)
SVG stands for Scalable Vector Graphics and is used to generate Scalable Vectors. When you recreate a web page in SVG, the web page loses it's functionality and becomes no more than a vector, stretch or shrink.

A better option for recreating web pages will be PSD and you could easily convert using Brackets - brackets.io. (I stand to be corrected).
...