image

Welcome to this Source Tutorial 2.

Images and SVG's.

This tutorial is designed to be Previewed in RW and then to switch between Edit and Preview mode when needed to understand what is happening in the settings.

SVGs.

Source has very powerful and multiple options to deal with images. The Image stack can use warehoused images and can therefore, use normal warehoused SVG images. I.e. load your images in any format to a server folder and then use the URL of the image you want and enter into the warehoused image link URL.

The green logo above is saved on a server at: https://webdeersign.com/warehouse/logo/wdslogonew1green.svg and this URL is entered into the URL for the image in the Images stack.

Note

This SVG has a width and size set into the SVG. Some have this and some don't. If you don't want an SVG to use it's width and height then open the SVG with any text editor and look in the first few lines for the text Width and Height. Specifically you will need to look for something like width="122.722" height="138.904", carefully select this exact text in your SVG and repace with this exact text preserveAspectRatio="none" which will allow the SVG to grow to fill its container.

SVG using the SVG stack.

The red logo above is displayed using the SVG stack. In Edit mode if you open the contents of the SVG by double clicking on the image, you will see the text or code used to build the SVG.

To get this code for an SVG that you want to use, open the SVG using a text editor. You must remove the few lines of code before the <svg and then copy everything including the <svg and </svg.

So what you need to copy will look like: <svg ... </svg>

Then copy this into the SVG stack.

Note

This may sound complicated, but it really isn't if you do it carefully. However, you do need to make sure that you copy everything and don't leave out a > or any other charecter. If you paste in an SVG into the Source stack and it doesn't show then you have not pasted in teh correct part of the SVG.

Note 2.

The Fill and the Stroke colours in the SVG can be overridden in the stack colour settings. Thi swill force all Fill and / or Stroke colours to the appropriate colour.


SVG Backgrounds

The Container above uses a Custom CSS background entered as code into the Container Background setting for Custom CSS.

In this case, an SVG background was created at SVGBackgrounds.com, coppied and then pasted into the Custom CSS box.

A CSS Background is usually some colours and a tiled SVG background all wrapped up for you in some code you can cut and paste. The big advantage of these backgrounds is that they are usually microscopic in size and always remain pin sharp.

Note

This SVG has a width and size set into the SVG. Some have this and some don't. If you don't want an SVG to use it's width and height then open the SVG with any text editor and look in the first few lines for the text Width and Height. Specifically you will need to look for width="122.722" height="138.904", carefully select this exact text in your SVG and repace with this exact text preserveAspectRatio="none" which will allow the SVG to grow to fill its container.

Using the SVG stack.

The layout above has an added SVG stack that is set to align to the bottom of the 300px high Container - which you learnt all about in Tutorial 1.

This particular SVG is one that I created starting from a 1000px by 100px white rectangle. I added points and dragged the points up and down to look like mountains. I then repeated this and used a semi transparent fill to add in the "distant" mountains and then added a red circle to look a bit like a sun. This is very basic Adobe Illustrator or Affinity Desiogner or in my case Autodesk Graphic stuff. I added the all important preserveAspectRatio="none" into the SVG and then pasted into the SVG stack above.

Magic Alert

I have also addded a couple of Classes into the image where the colour white is set and also where the red of the sun is set. Classes in this case, act as labels, so in other words where the white colour is set, I have labled it. In the CSS page wide code, I have also add a simple bit of code to set these labels to the Source Page BG, Page BG Alt and Accent colours. This allows you to alter these SVG's colours by changing the Source settings colours. As a demo, open the Source settings to view where the colours are set, Preview this page and then change the Page and Accent colours to see what happens. This is a huge aid in choosing colours.

Use the following labels or classes to pick up the Source settings colours
webdeersign-shape-fill1= accent
webdeersign-shape-fill2 = background webdeersign-shape-fill3 = background alt

Add class="webdeersign-shape-fill1" after the <path and before the d for the SVG fill colour you want to set to the Accent colour.

Similarly, the 4 SVG symbols below, have their Primary & Secondary colours set to the Source Accent colour. As a test, alter the Accent colour and Preview to see the effect. Check the page CSS in the Stack settings to see exactly how this is done. If you use FA5 symbols they will pick up these colours.

Using a CSS Gradient

The Container above is set to be 40vh, 50vh, 60vh and 100vh for the 4 device sizes XL, L, M and S. Also 2 arrows have been added into the container and Flexbox is enabeled and set to Space Between. These arrows are set to link to anchor0 and anchor1 set in the Containers above and below.

Sophisticated custom gradients can be used to enter into the Custom CSS background box. The one above is simply this code which has been generated at https://mycolor.space :

background-image: linear-gradient(to right top, #e21754, #dd378b, #c55aba, #9e78d9, #6f90e8, #469eea, #17a9e5, #00b2db, #00b9cc, #00bcad, #00bd82, #54ba4f);    
Useful links:
SVG Backgrounds

These and other CSS backgrounds can be created at sites such as:
SVG Backgrounds
SVG Patterns Gallery
Grabient Mycolor Gradients
SVGEEZ Gradientmagic
GetWaves

End of Tutorial 2