Pattern Fills with SVG and scaling

[createsean]

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.

 

 

[Polygonius]

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...

 

[gdenby]

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.

[createsean]

@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.

[gdenby]

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.

 

[firstdefence]

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 */
}

 

[Sirenetta]

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

[createsean]

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.