Vector for web

[Madame]

I'm new to vector files, and the questions reflect that.. ;)

 

 I want to upload a vector  file (PDF or SVG) to the web. I want to share it, of course.

 

I small baby steps and simple words, how do I do that?

 

I certainly can't upload it to Flickr, I get the invalid file message.

If I export it as jpg. it get blurry.

 

I was hoping there was an easy way and that it was possible to scale it without distorting it.

 

 

 

 

[Herbert123]

- share via DropBpx

- upload to your own web space

- SVG share http://svgur.com/

- setup a deviantart account, and share the SVG

[Madame]

Thank so much.

 

Dropbox isn't an alternative for the people I want to share it with. They need a helpline to manage that.. haha. ;)

 

I don't have a web site, just a blog. And it doesn't support SVG and PDF.

 

I'll investigate the other two alternatives. Thank so much.

[barninga]

afaik, recent web browser can natively display svg graphics. this should allow to embed the svg image in a html page with a regular img tag, or upload it to any site (why not a blog) that can display graphics.

[Madame]

Barninga, I can't get it to work. I get invalid file..  as in -not an img. file.

 

Flickr, photobucket, my blog, I need to understand what I'm doing and how to do that (or do like this: 1. 2. 3.)
The svgur generated links didn't work either.

 

I use chrome or safari.

[barninga]

Madame,

 

a line of html code like this:

<object type="image/svg+xml" data="image.svg"><img src=“image.png” alt=“Your browser does not support SVG”/></object> 

should do the trick. The browser displays the svg image; if it cannot be displayed, it displays the png version; if it cannot be displayed, it displays a warning message.

 

if you cannot insert html code in the page that should host the svg image (for example because it's a third-party maintained site and you only can upload the image), theoretically you should not have troubles anyway, since also the following line is stated to work with (decently) modern browsers, say from ie 9 onward:

<img src="image.svg" alt="Your browser does not support SVG" onerror="this.src='image.png'"> 

this is the line of code that should be created when you upload the file (well, maybe withoout the alt and onerror clauses). however, if the file is managed by the hosting site through javascript and various trickeries, i wouldn't have more suggestions, except asking the hoster what they expect you to do to have an svg image displayed by their software.

[Madame]

Well... as you see of my opening question, I'm new to vectors..
I'm also illiterate of HTML codes. I can use IMG links and and have some ideas about them, but... Well you know.

 

Let's say I got this code from Svgur:  <a href='http://svgur.com/s/2v'><img src='http://svgur.com/i/2v.svg' title='' /></a>

 

Or this one: <iframe src='http://svgur.com/f/2v'width=100% height=100% ></iframe>

 

How would you alter this so I could use them?

 

Please use plain words! ;)

[Madame]

I have an account on Deviantart. I tried to upload the svg file. 

The message:

 

EDIT: The PDF file uploaded fine. :)

[barninga]

Madame,

the first line of code displays an svg image and assigns an empty title to it:

<img src='http://svgur.com/i/2v.svg' title='' />

and makes this image a clickable link to svgur.com/s/2v:

<a href='http://svgur.com/s/2v'>...</a>

the second line of code sets an iframe (a sort of box in the page) and loads the content of svgur.com/s/2v into it, but this is not necessarily an svg image.

 

please note that if you go to http://svgur.com, you are presented a page full of svg images. looking at the code of the page, i've found that they are displayed with a line of code like this one:

<img class="pixpreview u-photo u-featured p-name" alt src="/i/2v.svg">

where the class keyword shows what styles are used to format the image. i guess that "preview" is a style that display the image in a small format. there's no text for the clause "alt", so no message is displayed if you hover on the image. the src clause tells what image to load, and the folder (well, "path" would be more correct) where it can be found on the server.

if you click on the top-left image, it is displayed in full format through this line of code:

<img id="svg" class="u-photo" src="/i/2v.svg">

where "id" and "class" have again something to do with the way the image is displayed (format, style elements...)  and "src" tells what image to display: not surprisingly, the path and file are the same of the thumbnail shown in the homepage, since svg graphics are scalable.

 

this tell us that, like i said in a previous post, browsers can display svg graphics; more, they can do it simply interpreting a plain "img" tag, that, in its simplest form, could be:

<img src="image.svg">

change image.svg with the actual name of your file and you're done. you only have to pay attention to where the file is on the server. if the html page containing the img tag and the svg image reside in the same folder (better: directory), no changes are needed. if instead the image file is held ina different directory, then the path must be specified. for example, let's say that the html page is at www.server.com/some-directory/html-pages and the image is at www.server.com/some-directory/images, then the src clause will look like this:

<img src="/some-directory/images/image.svg">

where the path is specified from the root level (that is from the first directory after the domain name). but it could also be specified like this:

<img src="../images/image.svg">

where ".." means "one step back" and leads to "some-directory".

 

this is a brief explanation of how the img tag works, but... what's your goal actually?

 

let's say that if you are creatiing an html page, now you should have some idea about how your svg image can be displayed.

 

but if you want to load a svg image to svgur.com, you can just upload it by clicking on the "choose file" button just below the big svgur title: the server will take care of generating the code that is needed to display your image just like all the others on the page.

 

i hope this helps you.

[barninga]

I have an account on Deviantart. I tried to upload the svg file. 

The message:

 

EDIT: The PDF file uploaded fine. :)

 

well i'd say the error message leaves no doubt about what the problem actually is: deviantart does not allow to submit svg files as "deviations".

however i'm quite sure it allows to attach a file to a submission, or at least it allowed to do so, since i did it in the past. if the option is still active, i think that your best chance is to upload the pdf version as deviation and the svg file as an attachment.

 

so you are a "deviant" artist :-)

me too: my deviantart name is barninga.

may i ask yours?

[Madame]

I haven't begun my career as an artist.. haha. No pictures yet. -Madame318 here.

I forgot that I had an account until yesterday.

 

Thank you for you thoroughly explanation of coding. I will save this to my mac and study it carefully. 

 

Well, my goal was to share the picture with some friends.. 

I uploaded a picture to svgur and it generated the codes I provided. Witch I couldn't use.

 

I can upload them as PNG, of course, but they are not scaleable, ie. get blurry, and I try to get my head around this.

 

I think I let it rest for a while I have to digest this.. ;)

 

Thank so much!

[barninga]

well you don't need to strieve for a good understanding of html code, unless you're planning to build your own site (more or less) from scratch. 99 sites out of 100 where you possibly upload your work take care for any coding needs.

 

btw, i did some test and i found that deviantart's attachment system is still alive, but it's called "premium content" now. basically you can submit a deviation (the pdf versione of the svg file, for example) and then choose to add premium content, whose price can be set to 0, which can apparently be digital content of any kind.

 

i visited your blog and found quite a few wonderful images there.... chapeau!

[Madame]

Thanks, Barninga. I'm flattered.
And you solved the mystery of the missing svg option of deviantart.  Thank you.