html5 website svg background

Post questions on how to use or achieve an effect in Inkscape.
CoolKay
Posts: 2
Joined: Sun Sep 07, 2014 2:13 am

html5 website svg background

Postby CoolKay » Sun Sep 07, 2014 7:48 am

I am countyfairgrounds.net - I want to put .svg files on all my backgrounds. I did this one http://www.countyfairgrounds.net/findch ... istmas.php - all I did was put it in the main window and save it as a .svg.
I don't think I did this right - I have looked and looked online for how to make website page backgrounds and am coming up very very confused. Someone from Wizpert gave me the css code - so that is not the issue.
What is? the size of the original input png file - so that it will work on all devices and be responsive ALSO just like how do I optimize this thing and make sure I am saving it right for the best viewing. HELP me please!

tylerdurden
Posts: 2344
Joined: Sun Apr 14, 2013 12:04 pm
Location: Michigan, USA

Re: html5 website svg background

Postby tylerdurden » Sun Sep 07, 2014 10:29 am

The big benefit of svg, is the facility for vector image. If the svg file only has an embedded raster-image, it might be just as well to just use the raster.

OTOH, if you want the benefit of vector graphics that SVG offers, you might look for (or create) background images that are svg files composed of vectors, not embedded rasters.
Have a nice day.

I'm using Inkscape 0.92.2 (5c3e80d, 2017-08-06), 64 bit win8.1

The Inkscape manual has lots of helpful info! http://tavmjong.free.fr/INKSCAPE/MANUAL/html/

CoolKay
Posts: 2
Joined: Sun Sep 07, 2014 2:13 am

Re: html5 website svg background

Postby CoolKay » Mon Sep 08, 2014 1:05 am

thank you for answering me. I much much appreciate it. I know what the benefit of .svg images are - I got it. That is why I am trying hard to learn how to do this. The problem is that I am not finding any good explanations as how to do this. I found the css code stuff for it. But I did not find any good recent resources for how to make a background image for a.html"postlink" href="http://design.tutsplus.com/courses/introduction-to-inkscape">http://design.tutsplus.com/courses/intr ... o-inkscape

tylerdurden
Posts: 2344
Joined: Sun Apr 14, 2013 12:04 pm
Location: Michigan, USA

Re: html5 website svg background

Postby tylerdurden » Mon Sep 08, 2014 6:30 am

There are also some excellent free tutorials... one resource I can recommend is here, by esteemed member Xav:
viewtopic.php?f=6&t=11981

As an excercise, the embedded bitmap is worth using to replicate in vectors. It will require use of:
Select tool
Rectangle tool
Gradient fill with three stops
Star tool: 8 points, four points.
Clone tool
Pencil tool
Guides
Rotate objects
Group objects

SVG Image


To make the above svg, make:
Guides around the original file's page (or around the raster object), see file menu.
Rectangle with corners snapped to guides, fill with gradient of colors similar to raster, or chose other
Small 8 point star. Clone and place, repeat. (pink stars)
Four point star with long points. Four point star with short points. place both together and group. Clone and place, repeat. (Blue stars).
Snowflake arm: vertical line with pencil tool. Three V-shape branch objects on top of vertical line. Group all for one branch.
Clone branch and rotate 60 degrees using guides. Repeat.
Group all snowflake branches. Clone and place, repeat.
Scale and rotate objects to suit taste.

Check back for tips on lower border.
Check back for tips on filling stars and flakes with reverse gradient as done in raster.

Download the above svg and open in inkscape to see use of layers.
Have a nice day.

I'm using Inkscape 0.92.2 (5c3e80d, 2017-08-06), 64 bit win8.1

The Inkscape manual has lots of helpful info! http://tavmjong.free.fr/INKSCAPE/MANUAL/html/

Lazur
Posts: 4717
Joined: Tue Jun 14, 2016 10:38 am

Re: html5 website svg background

Postby Lazur » Mon Sep 08, 2014 7:34 am

Sorry I don't get it.

You say you have the codes, but don't know, how to make a html5 background image?
So that you would like to make something clean and conveying in vectors.

Or is this the other way around:
you know the in and outs of drawing vectors, and just want to embed an svg in the background.
Hmm where would the css come in on a background.
Do you want to add buttons as svg-s too?


Return to “Help with using Inkscape”