Getting the hang of SVG - Love it 3 pages: 1 [2] 3
Posted: Saturday, January 12, 2019 11:07:04 PM
Yeah, I may understand it all someday. Abstract thinking and math has never been easy for me. In fact, I have a really hard time understanding these things. Designing incorporates a lot of those things, and I tend to get totally lost.
Posted: Sunday, January 13, 2019 2:37:04 AM
...

Using a gradient is not limited to black or white gradients into transparent.



This design makes use of an 8bit PNG purple fade to transparent on an orange-red zazzle tool background to get the hell-ish feeling. The Raffaels evil twin angels element are again positioned with microdots placed diagonal to define a square of equal size for every element from the lineart to the white of the eyes.

Happy designing.
-Love-
Posted: Sunday, January 13, 2019 12:22:36 PM
That's a cool use of a gradient! That's not an SVG, though, is it?
Posted: Sunday, January 13, 2019 3:33:34 PM
Karen Coffelt wrote:
That's a cool use of a gradient! That's not an SVG, though, is it?


No, but you can use the background color or a rectangle to change the gradient from orange to purple to a gradient yellow to purple or green to purple and you can use any translucent 8bit PNG in any shape to create the illusion of a 3D form with the ability to edit the color underneath with a correspondingly shaped SVG. In the evil twin angel I decided on a solid color in the design language of old animations before powerful rendering engines made gradient shadows affordable. So this design uses both PNG and SVG and as such it has a place in this thread.

When you have a background you want to be able to match the new color scheme. A translucent gradient towards transparency allows for that with some effective drama on the stage.

I recommend to open these examples and to check them out and learn from them.



Reminder why at least for the moment SVGs (designer version of the icons) lack some properties.
SVG files can neither be used as template, nor be tiled nor cropped in the zazzle tool.
SVGs are basically the option to upload your own icons and as such have only their property, with one exception, you can post your SVG-designs for sale.

Happy
Posted: Wednesday, January 16, 2019 8:53:56 PM
I just opened it and tried it. Didn't know what you were talking about before, and took me a bit to figure out that background color had to be changed on the auto-warping wrap. LOL! Pretty cool! How do I make a translucent gradient like that?
Posted: Thursday, January 17, 2019 1:14:40 AM
...

Depending on your software, you can make a layer with a solid color and and add a mask from white to black or your software allows for fading from color to transparent.

The best solution is preferable since it allows for a quick session of a consistent collection of your most used color. YouTube provides as always tutorials for most software programs. Here is the selection for Gimp and for Photoshop with masks (instead of a photo you use a solid color layer), etc.
Posted: Friday, January 18, 2019 8:49:46 PM
vivendulies wrote:
...

Depending on your software, you can make a layer with a solid color and and add a mask from white to black or your software allows for fading from color to transparent.

The best solution is preferable since it allows for a quick session of a consistent collection of your most used color. YouTube provides as always tutorials for most software programs. Here is the selection for Gimp and for Photoshop with masks (instead of a photo you use a solid color layer), etc.


Thank you! I will have to check those out when I have time. I use GIMP.
Posted: Friday, January 18, 2019 9:52:18 PM
Karen Coffelt wrote:
vivendulies wrote:
...

Depending on your software, you can make a layer with a solid color and and add a mask from white to black or your software allows for fading from color to transparent.

The best solution is preferable since it allows for a quick session of a consistent collection of your most used color. YouTube provides as always tutorials for most software programs. Here is the selection for Gimp and for Photoshop with masks (instead of a photo you use a solid color layer), etc.


Thank you! I will have to check those out when I have time. I use GIMP.


Karen, in Gimp there is a way to use gradients when using the fill bucket, but I only tried it once and now I can't remember how it was done... google it and you should get some great you tube tutorials that explain how... There are probably other tricks using gradients that I still haven't stumbled on too. lol

you and I are learning Gimp the same way.. trial and error. good luck!

I meant to mention that you can also adjust the opacity of the fill bucket when using it or you can use layers and make them semi transparent.
Posted: Saturday, January 19, 2019 10:33:27 AM
Thanks, Shelli! I do know about adjusting the opacity of the fill bucket and making layers semi-transparent.
Posted: Saturday, January 19, 2019 12:35:53 PM
Shelli Fitzpatrick wrote:
Karen, in Gimp there is a way to use gradients when using the fill bucket, but I only tried it once and now I can't remember how it was done... google it and you should get some great you tube tutorials that explain how... There are probably other tricks using gradients that I still haven't stumbled on too. lol

You would select the two colors for the gradient, click the gradient icon (for me that shows as the fourth row down on the left, second from left.)

Click and drag where you want it to start, and stop where you want it to end.

Not sure how you go about making gradients with more than two colors or adjust midpoints. I've been able to do that in Inkscape, but haven't found it yet in Gimp.
Posted: Saturday, January 19, 2019 1:35:43 PM
Fuzzy Felosarix wrote:
Shelli Fitzpatrick wrote:
Karen, in Gimp there is a way to use gradients when using the fill bucket, but I only tried it once and now I can't remember how it was done... google it and you should get some great you tube tutorials that explain how... There are probably other tricks using gradients that I still haven't stumbled on too. lol

You would select the two colors for the gradient, click the gradient icon (for me that shows as the fourth row down on the left, second from left.)

Click and drag where you want it to start, and stop where you want it to end.

Not sure how you go about making gradients with more than two colors or adjust midpoints. I've been able to do that in Inkscape, but haven't found it yet in Gimp.


Thank you Fuzzy!
Posted: Saturday, January 19, 2019 9:01:14 PM
YAY!!! I did it!!! Grin Grin Grin Thanks for the help, guys!
Posted: Saturday, January 19, 2019 9:50:52 PM
Karen Coffelt wrote:
YAY!!! I did it!!! Grin Grin Grin Thanks for the help, guys!


YAY!

I will have to try it again soon.
Posted: Sunday, January 20, 2019 5:27:23 AM
Hi folks,

I read this and I'm left with the impression, that you use gradients from on color to another color, which is fine. Nothing wrong with it, but here in this thread the main subject are the SVG and shapes for their property to edit colors and that's why I add a little instruction on how to go about it.

File setting:
at least 3000px (better higher, though it might be more than the default recommends)
8-Bit for best textile print results
and for acrylic tumbler 600 px/inch

1) You make a layer with a pattern or solid color
2) You right click on the layer icon and add a mask, pick option white for full opacity.
3) Make sure the new mask layer is active, has the white thick boader
3) You use the gradient bucket tool from foreground (FG=black) to transparent on the layer
4) You place your mouse at the bottom edge a smidgen above to go to full transparency on the bottom.
5) Hold your left mouse key and control on your keyboard for a straight perfectly vertical gradient and draw your mouse to just a smidgen below the top edge of the image to make sure you have a little full solid color.

Safe as PNG. Voila.

You can activate the layer again and use the bucket to change the color of your gradient and safe to a new PNG and build a library for your zazzle tool.

Using the mask for vignettes.
Activate the mask layer, draw a black oval on the white (select tool circle + fill bucket), remove the selection and blur the oval with the blur filter. If you want a perfect circle hold the control key when pulling the circle selection with your mouse. You can draw a black heart with your brush tool on the white layer mask and blur it and get a heart shaped vignette. And again using a mask instead of cutting out a heart of a solid color and blurring, allows for stream lining the production of a bunch of vignettes in your most used colors for your zazzle image library since you can use the bucket on the layer to change colors and even apply patterns.



This example is a bit of a stretch for this SVG thread, however the balloon girl is an SVG file and as for stream lining this would easily be done by changing the vignette image and adjust the SVG file of the girl to offer a few color variations, and for the more ambitious among us it might as well be a Japanese cutout scenery of lovers in SVG behind the vignette.

The following examples however show the strength of SVG since in a hidden layer additional colored vignettes provide for girls/boys announcement and other themes. This is still a good option even if you provide the blue variation, since often enough only on variation makes it to the front and this way customers have the ability to change the colors of the one in front of them.



The green variation holds aside from the green vignette additional blue, pink and yellow vignettes in hidden layers.


Happy designing.
-Love-


Posted: Sunday, January 20, 2019 7:45:17 AM
Thanks for the tutorial! I will try this sometime soon.
Posted: Sunday, February 03, 2019 7:11:45 AM
...

Fans of a weathered look can still make use of SVG files and its color editable properties.





The grunge is added via PNG. The PNG was a photo of a cement wall. I applied an alpha filter mask, so that the different values in the photo determine the degree of transparency and added an all over translucency of 40%. In This example I also made use of a zazzle photo filter to add a little color to the grunge.

-Love-
Happy Designing
Posted: Sunday, February 03, 2019 12:44:26 PM
...

The grunge file I used above is too small for the towel set aside from the wash cloth, so I had to use a different file. I decided to get some grunge for my SVG image library. I used toothbrush spatter photo, which was rendered to vector by a bot. Since you end up with an unmanageable amount of tincy wincy shapes in different colors, use the search shapes by color function to separate the spatter and exported the different grunge pattern to SVG with which you can create that vintage grunge look in any size.



Happy designing.
-Love-
Posted: Tuesday, February 05, 2019 5:20:02 AM
...
Staying vector and allowing for customer image replacement.

The design consist completely of SVG files.



Having the composition completely in SVG files allows for color coordination but when the customer wants his cat in this setting he has his work cut out.


The cat still as a vector in PDF and the rest still in SVG



SVGs can't be defined as template and since these images are composed of several files it wouldn't be a good idea anyways. The cat is still a vector design with the scalability of vector designs. But the cat can now be exchanged. Admittedly to cut out a cat out of its photo and saving it as PNG with transparency is not in every ones skill set but there are services for this available.


-Love-
Happy Designing
Posted: Thursday, February 07, 2019 8:37:05 PM
Those are really cool!

Yeah, I don't think most customers would know how to do cut-outs, but maybe some do.
Posted: Tuesday, February 12, 2019 4:09:05 AM
...

Thank you, Karen.



Making seamless patterns in SVG.

| |


In order to create a seamless pattern start with the edges and create a little variety. Anything on the inside is then whatever and doesn't need special consideration.

|


The rest is arranging the elements in a nice way and giving it some color. Squint your eyes from time to time to make sure none of the elements is sticking out too much and throws the repetition into your face.




If the customer want to have both the same he has the option. And can change it to anything he likes. Though he might want to be familiar with crtl + mouse click mark several at a time and ctrl + a to mark all to speed up the process.


Happy Designing
Love






Posted: Sunday, February 17, 2019 11:10:40 AM
...


Start building an image library and reuse your design elements.



Love
Happy Designing
Posted: Wednesday, February 20, 2019 2:27:46 PM
I've been having some fun with this creating graduation invitations. Almost all of the elements are different SVGs, allowing you to customize the colors however you like. I did go ahead and set each invite up in some standard colors - blue, red, green, etc. - and then made some unique versions to show off how you can customize. (The design theme bit has caught up on some of these and it's really cool to see all the circles showing the different colors!)



Posted: Thursday, February 28, 2019 7:41:09 PM
...

Using two microdots of 0,0'' and 45° diagonal to define a perfect square to align color layers of multicolored SVG designs work with contour stickers, They don't show up in the preview and seem to be ignored as they should.



Both layers of the giraffe are place between those two microdots and exported to svg forming a square of equal size and layering shape over shape fitting perfectly even with fine lines like in this giraffe and as you can see, the sticker outlines the giraffes only.

Happy Designing
-Love-

Posted: Saturday, March 02, 2019 8:13:25 AM
I'm having an issue where Zazzle's system seems to be changing the aspect ratio of the svg files I upload. The width gets reduced, causing them to appear vertically stretched. I can watch it happen in real time as a file is uploaded - the placeholder for the image starts out at the right size, but at the last moment of uploading, the width gets shrunk.

It's probably something I'm doing wrong, but I just can't figure it out. Have tried both Affinity and Inkscape, and it happens with both. I'm not about to try yet another application just to do svg files. I'll have to skip them entirely if I can't get this sorted.
Posted: Saturday, March 02, 2019 8:54:30 AM
Fuzzy Felosarix wrote:
I'm having an issue where Zazzle's system seems to be changing the aspect ratio of the svg files I upload. The width gets reduced, causing them to appear vertically stretched. I can watch it happen in real time as a file is uploaded - the placeholder for the image starts out at the right size, but at the last moment of uploading, the width gets shrunk.

It's probably something I'm doing wrong, but I just can't figure it out. Have tried both Affinity and Inkscape, and it happens with both. I'm not about to try yet another application just to do svg files. I'll have to skip them entirely if I can't get this sorted.


I was having problems with Inkscape too, not with stretching but with uploading a blank svg file. I never did figured it out yet. and don't have time right now to invest in trying so it will have to wait until later for me...

I will be interested to find out what you learn!
Posted: Saturday, March 02, 2019 8:54:43 AM
Fuzzy Felosarix wrote:
I'm having an issue where Zazzle's system seems to be changing the aspect ratio of the svg files I upload. The width gets reduced, causing them to appear vertically stretched. I can watch it happen in real time as a file is uploaded - the placeholder for the image starts out at the right size, but at the last moment of uploading, the width gets shrunk.

It's probably something I'm doing wrong, but I just can't figure it out. Have tried both Affinity and Inkscape, and it happens with both. I'm not about to try yet another application just to do svg files. I'll have to skip them entirely if I can't get this sorted.


Try placing them in a square of microdots, so when zazzle changes the size the design inside the microdot should keep its ratio.

I start with a square zoom in on the lower left corner as much as the program allows and draw a circle or square as small as my hand mouse coordination and the program allows and use the percentage size reduction and shrink it to 0.001% which usually gets corrected. Thus I have the smallest sized dot possible.

I align the dot with the square so the microdot sits mathematically perfect on the edge right in the corner. I duplicate the dot and align the second microdot with the right upper corner of the big square.

At last I combine the two microdots to one curve.

Attention! Don't export the big square to which you aligned the microdots with your design or you get black squares after uploading.

After that I place my design inside the two microdots and have always a perfect square.

Since I haven't noticed any ratio issue, I don't do it with designs I don't need to align with a second color, but this might help you with your issue.

...
Posted: Saturday, March 02, 2019 11:26:59 AM
Actually, resizing the canvas to a square seems to have done the trick on my latest effort, but I'll keep your solution in mind if I run into future issues.
Posted: Saturday, June 15, 2019 7:31:49 AM

This video holds a demo of how SVG files can be layered to create multi colored design, with custom color choice.

-Love-
Happy Designing
Posted: Saturday, June 15, 2019 10:18:41 AM
I have a question for you Viv... when I am creating SVG in inkscape using the trace function, why do my files sometimes come out blank? what am I doing wrong?

I have succeeded making them before but somewhere along the line I went wrong and my last few attempts were blank when I uploaded them to Zazzle.
Posted: Saturday, June 15, 2019 11:54:47 AM
Shelli Fitzpatrick wrote:
I have a question for you Viv... when I am creating SVG in inkscape using the trace function, why do my files sometimes come out blank? what am I doing wrong?

I have succeeded making them before but somewhere along the line I went wrong and my last few attempts were blank when I uploaded them to Zazzle.


I'm still a fairly newbie myself when it comes to SVG and I haven't used inkscape in ages but maybe you experience a problem I had with illustrator a short while ago.

When you open an SVG file in a text editor you get something like this:

Saved as Inkscape-SVG
Code:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="210mm"
   height="297mm"
   viewBox="0 0 210 297"
   version="1.1"
   id="svg8"
   inkscape:version="0.92.2 (5c3e80d, 2017-08-06)"
   sodipodi:docname="arizona_via_incscape.svg">
  <defs
     id="defs2">
    <style
       id="style10"
       type="text/css"><![CDATA[
    .fil0 {fill:black;fill-rule:nonzero}
   ]]></style>
  </defs>
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="0.35"
     inkscape:cx="350"
     inkscape:cy="560"
     inkscape:document-units="mm"
     inkscape:current-layer="layer1"
     showgrid="false"
     inkscape:window-width="1600"
     inkscape:window-height="837"
     inkscape:window-x="-8"
     inkscape:window-y="-8"
     inkscape:window-maximized="1" />
  <metadata
     id="metadata5">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:label="Ebene 1"
     inkscape:groupmode="layer"
     id="layer1">
    <g
       style="clip-rule:evenodd;fill-rule:evenodd;image-rendering:optimizeQuality;shape-rendering:geometricPrecision;text-rendering:geometricPrecision"
       id="g28"
       transform="matrix(0.15478301,0,0,0.15478301,2.2837793,16.786942)"
       inkscape:transform-center-x="-3.8809344"
       inkscape:transform-center-y="1.9404673">
      <g
         id="Ebene_x0020_1">
        <polygon
           id="polygon15"
           points="220,198 251,176 268,189 286,190 297,221 312,227 324,223 347,193 396,0 533,38 700,82 877,128 1039,167 1192,201 1310,227 1266,445 1221,675 1181,885 1143,1084 1103,1303 1055,1575 679,1500 0,1031 0,1008 23,989 51,1000 75,971 79,946 41,906 54,876 48,853 53,828 72,829 101,800 109,771 119,764 126,705 147,694 159,676 220,649 209,599 186,573 161,477 166,450 173,418 186,415 195,370 199,271 214,237 206,215 "
           class="fil0"
           style="fill:#000000;fill-rule:nonzero" />
      </g>
    </g>
  </g>
</svg>


or as normal SVG
Code:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   id="svg8"
   version="1.1"
   viewBox="0 0 210 297"
   height="297mm"
   width="210mm">
  <defs
     id="defs2">
    <style
       type="text/css"
       id="style10"><![CDATA[
    .fil0 {fill:black;fill-rule:nonzero}
   ]]></style>
  </defs>
  <metadata
     id="metadata5">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     id="layer1">
    <g
       transform="matrix(0.15478301,0,0,0.15478301,2.2837793,16.786942)"
       id="g28"
       style="clip-rule:evenodd;fill-rule:evenodd;image-rendering:optimizeQuality;shape-rendering:geometricPrecision;text-rendering:geometricPrecision">
      <g
         id="Ebene_x0020_1">
        <polygon
           style="fill:#000000;fill-rule:nonzero"
           class="fil0"
           points="220,198 251,176 268,189 286,190 297,221 312,227 324,223 347,193 396,0 533,38 700,82 877,128 1039,167 1192,201 1310,227 1266,445 1221,675 1181,885 1143,1084 1103,1303 1055,1575 679,1500 0,1031 0,1008 23,989 51,1000 75,971 79,946 41,906 54,876 48,853 53,828 72,829 101,800 109,771 119,764 126,705 147,694 159,676 220,649 209,599 186,573 161,477 166,450 173,418 186,415 195,370 199,271 214,237 206,215 "
           id="polygon15" />
      </g>
    </g>
  </g>
</svg>


Both files are unnecessarily bloated.


All you need is:

Code:

<svg
   xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   viewBox="0 0 210 297"
   height="297mm"
   width="210mm">

   <polygon  points="220,198 251,176 268,189 286,190 297,221 312,227 324,223 347,193 396,0 533,38 700,82 877,128 1039,167 1192,201 1310,227 1266,445 1221,675 1181,885 1143,1084 1103,1303 1055,1575 679,1500 0,1031 0,1008 23,989 51,1000 75,971 79,946 41,906 54,876 48,853 53,828 72,829 101,800 109,771 119,764 126,705 147,694 159,676 220,649 209,599 186,573 161,477 166,450 173,418 186,415 195,370 199,271 214,237 206,215 " fill="000000"/>
</svg>




or based on a square:

Code:

<svg>
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   version="1.1"

   width="200mm"
   height="200mm"
   viewBox="0 0 200 200"

<polygon id="polygon15" points="700,82 877,128 1039,167 1192,201 1310,227 1266,445 1221,675 1181,885 1143,1084 1103,1303 1055,1575 679,1500 0,1031 0,1008 23,989 51,1000 75,971 79,946 41,906 54,876 48,853 53,828 72,829 101,800 109,771 119,764 126,705 147,694 159,676 220,649 209,599 186,573 161,477 166,450 173,418 186,415 195,370 199,271 214,237 206,215 220,198 251,176 268,189 286,190 297,221 312,227 324,223 347,193 396,0 533,38 " fill="#000000" />
</svg>




What you see here are the coordinates for the map of Arizona in every case. Important is the viewbox. Make sure your viewbox starts at zero zero, what follows is the width and height of the viewbox. You may have noticed the difference in coordinates. That is because the map was centered in both files the A4 and the custom square document with a width of 200mm.

In the A4 is more space above and below the map and in relation to the coordinates of the viewbox starts further down.

Check your file in a text editor and get rid of all the unnecessary garbage and make sure your viewbox started at zero zero. You can't just change the viewbox to zero zero. The coordinates need to be based on the the starting point in the viewbox.



You can try optimize your SVG in one of the online tools:

https://www.ofoct.com/de/image-converter/svg-optimizer.html

or

https://petercollingridge.appspot.com/svg-optimiser


I hope this helps with the zazzle interpretation of SVG. Zazzle probably uses some Adobe specs. But it should still be able to read a basic SVG.
--
Users browsing this topic
Guest


Forum Jump
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.
Print this topic
RSS Feed
Normal
Threaded