> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions.
# SVG Gradient Units: Share One Blend Across Logo Paths
> Make a gradient flow across separate SVG logo paths. Compare gradientUnits, set shared endpoints, and fix a translated group's unexpected color shift.
Source: https://perfectvector.com/blog/svg-gradient-units
Language: en
Author: Irene Kim
Published: 2026-09-18T08:00:00+09:00
Updated: 2026-10-06T08:00:00+09:00
To spread one gradient across separate SVG paths, use `gradientUnits="userSpaceOnUse"`, set endpoints in the artwork's coordinates, and keep the paths in the same coordinate system. Each path then reveals the portion of the blend at its position. You can keep the logo's pieces separately editable.
The default, `objectBoundingBox`, fits the gradient to each painted element. Referencing the same gradient ID from three paths can therefore produce three complete purple-to-orange blends. Changing the units fixes that repetition, but a transformed child can still shift its own paint. [MDN's gradientUnits reference](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/gradientUnits) defines the reference space as the current user space of the element using the gradient.
This walkthrough uses an original three-part emblem drawn directly as SVG paths. If you already have a vector logo, work from that master. A raster-only source needs geometry recovery before this paint-editing step; the broader [gradient vectorization guide](https://perfectvector.com/blog/vectorize-gradients) explains that choice.
## Decide whether the blend belongs to each shape or the whole mark
Use object-relative paint when every part should have its own complete blend. Use shared user-space endpoints when the left and right parts should sample different colors from one transition.
| Setting | What the endpoints refer to | Result for separate paths |
| ------------------------------------------------------ | -------------------------------------------------- | ------------------------------------------------------------- |
| `objectBoundingBox` | Each painted element's bounds | The blend repeats across each part |
| `userSpaceOnUse` | The referencing element's current user coordinates | The blend continues across parts that share those coordinates |
| `userSpaceOnUse` inside a separately transformed child | That child's transformed coordinate system | The paint can move with the child |
Putting `fill="url(#brandBlend)"` on a group passes the fill to its children. It does not make an object-bounding-box gradient measure the group's combined silhouette. The children still receive their own paint. The [SVG paint-server specification](https://svgwg.org/svg2-draft/pservers.html) describes gradients as resources referenced by an element's fill or stroke.
**One emblem, four coordinate choices**
*The original paths stay separate. A repeats the blend; B shares it. C changes the last path's local coordinates, while D moves the complete emblem and its paint together.*
## Set endpoints that span the artwork
The example's paths occupy horizontal positions from `x=30` to `x=310`. Those are the blend's endpoints. The triangle stops at `x=125`, the middle block occupies `140` through `210`, and the right shape runs from `225` to `310`.
Save this as `shared-logo.svg` and open it in a browser:
```xml
```
You should see a purple triangle, a mostly pink center block, and an orange-shaded right shape, as in B. The empty gaps hide sections of the same blend; the color does not restart when the next path begins. Change one stop and all three pieces update because they reference the same definition.
For a direct comparison with A, replace the gradient's `gradientUnits`, `x1`, `y1`, `x2`, and `y2` attributes with `x1="0%" y1="0%" x2="100%" y2="0%"`. Omitting `gradientUnits` restores the default. Each shape now receives the full color transition.
> **Why x2=1 can make the logo look like one color**
>
> In user space, a unitless `x2="1"` means coordinate 1, not 100% of the logo. If the blend ends before the paths begin, the default pad behavior extends its final color across them. Choose endpoints from the artwork's actual bounds.
Percentages have a different reference too: with `userSpaceOnUse`, they refer to the current SVG viewport rather than the painted object's bounding box. Explicit numbers make this example easier to inspect. A logo occupying only part of a large viewBox need not use that viewBox's full width for its blend.
## Check transforms when one piece has the wrong color
In C, the right shape looks as though it has stayed in place. Its path coordinates moved 60 units left, and a child group moved it 60 units right:
```xml
```
Replace the third path in the complete example with this group to reproduce the mismatch. Its visible left edge remains at `x=225`, but its local left edge is `x=165`. The gradient uses that local space, so the piece samples an earlier, pinker part of the blend. `userSpaceOnUse` is not a promise of one global coordinate system regardless of nested transforms.
For this emblem, restore the third path's original coordinates and remove its private translation. If the whole logo needs moving, apply `transform="translate(10 0)"` to the existing outer group instead. That produces D: all three shapes and their shared paint move together.
This correction works because the paths are already expressed in a common coordinate system. Putting unrelated transformed children inside one more group does not remove their individual transforms. For an imported logo, inspect those transforms before flattening or rewriting geometry, and preserve a copy of the original master.
### When gradientTransform is useful
For a radial blend, you can move the highlight by changing the [radial-gradient focus](https://perfectvector.com/blog/svg-radial-gradient-focus) while keeping the path and end circle fixed. Check the coordinate units first: a wide object bounding box can make the paint elliptical even when the source gradient uses a normalized circle.
`gradientTransform` changes the paint's coordinate mapping without changing the path geometry. It is useful when you deliberately need to rotate, skew, or reposition a blend. [MDN documents it as an additional transform](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/gradientTransform) applied after the coordinate system selected by `gradientUnits` is established.
Avoid adjusting one shared definition to compensate for a single child without checking the others. Every shape referencing that definition can be affected. Keeping the artwork in a common space is easier to maintain for the simple logo here; more complex imported artwork may need separately mapped gradient definitions.
## Where PerfectVector fits
If the only source is a PNG or JPG logo, PerfectVector can help recover editable vector geometry before you rebuild the coordinated gradient. [Vectorize the logo](https://perfectvector.com/vectorize-logo), then inspect the silhouette, holes, and distinct parts in your editor. Use those shapes as the starting point for the shared paint.
The demonstration above was hand-authored to isolate coordinate behavior; it is not a PerfectVector conversion result. Tracing shaded pixels should not be assumed to recover the original gradient stops or its coordinate settings. A simple logo may also be quicker to redraw manually. Keep an existing SVG, AI, or vector PDF when one is available.
For a shape that refuses a new fill, use the [SVG recoloring checks](https://perfectvector.com/blog/how-to-change-svg-color) before changing gradient coordinates. If the same export differs between applications, follow the [SVG color-shift diagnosis](https://perfectvector.com/blog/why-svg-colors-change-after-export).
## Reopen the file before handing it off
Save a new SVG and test the exact file, not just the editor canvas. Check the following:
* The gradient ID exists and every intended path references it.
* The blend covers the logo's bounds at the intended direction.
* Moving the entire mark keeps the colors coordinated.
* Separate parts remain selectable where you need to edit them.
* The receiving application preserves the expected appearance.
A smooth browser render demonstrates the paint behavior in that browser. It does not establish support in every editor or turn the gradient into cutting geometry. Keep a flat-color version for workflows that need solid shapes, and retain the editable SVG master. The [SVG file guide](https://perfectvector.com/blog/what-is-an-svg-file) explains the difference between the file's geometric content and its displayed appearance.
## FAQ
**Do I have to merge paths to share a gradient?**
No. Separate paths can reference one gradient. Use userSpaceOnUse with appropriate endpoints and make sure the paths share the intended coordinate system.
**Why does grouping the paths still repeat the gradient?**
A group can pass its fill to child paths, but an objectBoundingBox gradient still uses each painted child's bounds. Set user-space endpoints when the blend should span the entire mark.
**Why did one path's color change after I moved it into a group?**
A transform on that group can change the path's local coordinate system. Compare its transforms with the other paths and test the exported SVG before adjusting the shared gradient.
## Sources
1. [MDN — gradientUnits](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/gradientUnits) — Defines the default, referencing coordinate systems, and percentage behavior.
2. [SVG Working Group — Paint servers](https://svgwg.org/svg2-draft/pservers.html) — Specifies reusable gradient paint, stops, and spread behavior.
3. [MDN — gradientTransform](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/gradientTransform) — Explains additional transformations of gradient coordinates.
***
Starting from a raster logo? [Turn your logo into editable SVG paths](https://perfectvector.com/vectorize-logo), inspect the separate shapes, then rebuild the shared gradient and reopen the final export to check its alignment.
## Explore
- [Read the HTML article](https://perfectvector.com/blog/svg-gradient-units)
- [SVG feColorMatrix: Recolor Without Changing Fills](https://perfectvector.com/blog/svg-fecolormatrix.md)
- [QGIS SVG Markers: Prepare Symbols With Editable Colors](https://perfectvector.com/blog/qgis-svg-markers.md)
- [Product facts](https://perfectvector.com/product-facts.md)
- [FAQ](https://perfectvector.com/faq.md)
- [Pricing and credits](https://perfectvector.com/pricing.md)