Jump to content
createsean

Pattern Fills with SVG and scaling

Recommended Posts

Hello,

I have figured out how to use a pattern fill with a jpg/png but what I want to do is use an SVG pattern to fill and have it repeat and be scalable.

What I'm doing is grabbing a pattern from here (web ready) http://www.heropatterns.com/ and placing it into my new web design. However I can't do that with Designer without converting to a png. Is it possible to do what i want? If not, I can convert to png, but I am unable to scale the pattern down. See screenshot where the cogs are oversized compared to the container. In the screenshot I converted the svg to a png and used that as the pattern fill, but it doesn't scale and kind of feels like a hack doing it this way.

FWIW, I am new to Designer and design in general.

 

 

Capture.JPG

Share this post


Link to post
Share on other sites

I do not know a way to use a SVG as "gradient-fill". Just jpg, png....

But with AP you could at least convert all relevant SVG to jpg, png... and (mostly i like it desaturated or BW) in one batch-step. Just create a batch with all steps you like and duplicate the run this to files you want. 

PNG has the advantage of transparent background (BG), but even with jpg you can use the pattern-layer in another blend-mode than normal. Darken will delete all white BG and ligthen the opposite...

However, you can transform the size of the pattern with the gradient-tool (often its useful to check the keep-ratio in the toolbar, and sometimes another mode, like mirror is also interesting, also another quality-mode... In much case the SHIFT-key is also useful during transform.

If you are happy with the result, save that as style. A style is much "extensive" than an entry in the color-pallete. It contains the bitmap, the current transform, the layer-blend-mode... (the current font, its color...) and all other layer-fx-settings. 

Often you just want change the "fill" with a pattern and keep the rest as it is. In this case a "color" is the better choice (believe or not: you can save complex pixel- jpgs as "color". Unfortunatly there is no way to batch-convert styles just as colors, you have to o by hand. 

 

Of course a picture isa  picture (raster) and each transform will distort this, but its impressive how wide you can transform inside AP without visible artifacts. However if you want xyour SVG in very big or very small sizes... its a good idea to render this in approximately exact this size.

Unfortunately "patterns" are not available as special section/part of the layer-fx, you need always a separate layer. It would be so much comfortable if you could collect your patterns and call just via the layer-fx in a blend-mode / withe scale-sliders you want, without this lot of xtra steps...

 

Thanks for that Link - really tasteful stuff! Of course all needs a level/desaturate but with a batch-process its done in seconds. Just the "import" = save as style/color takes time...

 


OSX 10.13.5  / iMac Retina 27" / AMD Radeon R9 M380 / Metall: on!

Share this post


Link to post
Share on other sites

I'm not entirely sure what you are trying to do. Why not use the .svg, and simply repeat it as you like? Most, if not all,contemporary browsers render .svg. Within designer, you can replicate them and transform them as you like, w. no loss of detail.


iMac 27" Retina, c. 2015: OS X 10.11.5: 3.3 GHz I c-5: 32 Gb,  AMD Radeon R9 M290 2048 Mb

iPad 12.9" Retina, iOS 10, 512 Gb, Apple pencil

Huion WH1409 tablet

Share this post


Link to post
Share on other sites

Hello, again, createsean,

I know there have been many posts about creating repeating bitmap tiles, which can then be repeated and scaled w. the fill tool. I understand AI has a tool set that allows something similar for vectors.

Designer can do similar, but not so automated. Perhaps more versatile.

.Svg items can be either a single curve, in Designer terminology, or a group of curves. Both can be replicated and scaled w. the standard tools. If you use a tile that has already been made, it is simply a matter of sliding duplicates around, aligning, transforming etc, and then scaling all of them as a perhaps a group of groups. 

You can also change them to symbols, and save them off as assets for use in other documents. That way, every geometric element in the symbol can be changed at once across all. And every symbol instance can be scaled and transformed itself, retaining the internal object(s) attribute.

 

1310296936_Bols1.thumb.jpg.18beb0d6db78c357c4467615265e6362.jpg

277855537_Bols2.thumb.jpg.c806c993c4d9c8562bb65198484492c9.jpg

400480035_Bols3.thumb.jpg.0b9a02d7b14ff2a4c026ff3dc9d93d50.jpg


iMac 27" Retina, c. 2015: OS X 10.11.5: 3.3 GHz I c-5: 32 Gb,  AMD Radeon R9 M290 2048 Mb

iPad 12.9" Retina, iOS 10, 512 Gb, Apple pencil

Huion WH1409 tablet

Share this post


Link to post
Share on other sites

Using HTML and CSS its easy to scale an image. You can make the image exactly the size you want or larger and scale it down or up.

<div class="tiledBackground">
</div>
.tiledBackground {
  background-image: url(https://whatever-image.png); /* Image location: Http or local */
  background-size: 100px; /* adjusts the size of the image */
  width: 1000px; /* Width of space to apply the background image */
  height: 1000px; /* height of space to apply the background image */
}

 


iMac 27" Late 2015 Fully Loaded, iMac 27" Mid 2011 both running High Sierra 10.13.6 - Affinity Designer/Photo, Publisher Beta 1.7.0.140, Illustrator CC, Inkscape, Blender, Sketchup, Pepakura Designer, MTC, Pixelmator & Pixelmator Pro + more... XP-Pen Artist-22E, - iPad Pro 12.9 B|  

Affinity Help - Affinity Desktop Tutorials Instagram & Flickr

Share this post


Link to post
Share on other sites
On 9/3/2018 at 7:44 AM, createsean said:

@gdenby That's exactly what I want to do, but I can't figure out how to have the svg repeat as a background and also scale as I want. 

CreateSean, if you download the SVG, you can expand the document dimensions (File>>Document Setup) and then copy/paste the curve as needed until you have the size you need. Then combine the curves to create one background image. The attached file was created this way. It's 720px square, but it can be as large as you want with that method. To size it as a rectangle shape,  create a rectangle that size and then in your layer's menu, drag the rectangle over the curve to make the curve constrain to the rectangle. See file attached. I hope this helps.

floating-cogs.afdesign

floating-cogs_rectangle.afdesign

Share this post


Link to post
Share on other sites
32 minutes ago, Sirenetta said:

CreateSean, if you download the SVG, you can expand the document dimensions (File>>Document Setup) and then copy/paste the curve as needed until you have the size you need. Then combine the curves to create one background image. The attached file was created this way. It's 720px square, but it can be as large as you want with that method. To size it as a rectangle shape,  create a rectangle that size and then in your layer's menu, drag the rectangle over the curve to make the curve constrain to the rectangle. See file attached. I hope this helps.

floating-cogs.afdesign

floating-cogs_rectangle.afdesign

Thank you, I think I understand.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×