diff --git a/README.md b/README.md
index 9b971c41..5c3ac372 100755
--- a/README.md
+++ b/README.md
@@ -74,6 +74,10 @@ Defaults to `true`. Opt-out of animations with `false`
 
 Defaults to `Loading interface...`. It's used to describe what element it is. Use `false` to remove.
 
+**`baseUrl? string`**
+
+Required if you're using `<base url="/" />` in your `<head/>`. Defaults to an empty string. This prop is commom used as: `<ContentLoader baseUrl={window.location.pathname} />` which will fill the svg attribute with the relative path. Related [#93](https://github.com/danilowoz/react-content-loader/issues/93).
+
 **`speed?: number`**
 
 Defaults to `2`. Animation speed in seconds.
diff --git a/docs/props.mdx b/docs/props.mdx
index 022af554..4691f3d6 100644
--- a/docs/props.mdx
+++ b/docs/props.mdx
@@ -22,6 +22,14 @@ Defaults to `Loading interface...`. It's used to describe what element it is. Us
   <Facebook ariaLabel="my custom loader" />
 </Playground>
 
+## **`baseUrl? string`**
+
+Required if you're using `<base url="/" />` in your `<head/>`. Defaults to an empty string. This prop is commom used as: `<ContentLoader baseUrl={window.location.pathname} />` which will fill the svg attribute with the relative path. Related [#93](https://github.com/danilowoz/react-content-loader/issues/93).
+
+<Playground>
+  <Facebook baseUrl="/mypage" />
+</Playground>
+
 ## `speed?: number`
 
 Defaults to `2`. Animation speed in seconds.
diff --git a/src/Holder.tsx b/src/Holder.tsx
index 26e29989..e965a30e 100644
--- a/src/Holder.tsx
+++ b/src/Holder.tsx
@@ -6,6 +6,7 @@ import { IContentLoaderProps } from './interface'
 export const defaultProps: IContentLoaderProps = {
   animate: true,
   ariaLabel: 'Loading interface...',
+  baseUrl: '',
   gradientRatio: 2,
   height: 130,
   interval: 0.25,
diff --git a/src/Svg.tsx b/src/Svg.tsx
index d2bae252..9dd69c9c 100644
--- a/src/Svg.tsx
+++ b/src/Svg.tsx
@@ -10,6 +10,7 @@ export default ({
   style,
   width,
   height,
+  baseUrl,
   gradientRatio,
   animate,
   ariaLabel,
@@ -45,8 +46,8 @@ export default ({
         y="0"
         width={width}
         height={height}
-        clipPath={`url(#${idClip})`}
-        style={{ fill: `url(#${idGradient})` }}
+        clipPath={`url(${baseUrl}#${idClip})`}
+        style={{ fill: `url(${baseUrl}#${idGradient})` }}
       />
 
       <defs>
diff --git a/src/__tests__/Holder.tests.tsx b/src/__tests__/Holder.tests.tsx
index 0b1b90dc..55f33595 100644
--- a/src/__tests__/Holder.tests.tsx
+++ b/src/__tests__/Holder.tests.tsx
@@ -30,21 +30,22 @@ describe('Holder', () => {
     const withPropsComponent = ShallowRenderer.createRenderer()
     withPropsComponent.render(
       <ContentLoader
-        rtl
-        speed={10}
-        interval={0.5}
-        width={200}
+        animate={false}
+        ariaLabel="My custom loading title"
+        baseUrl="/mypage"
+        className="random-className"
         gradientRatio={0.5}
         height={200}
-        animate={false}
+        interval={0.5}
+        preserveAspectRatio="xMaxYMax meet"
         primaryColor="#000"
-        secondaryColor="#fff"
         primaryOpacity={0.06}
+        rtl
+        secondaryColor="#fff"
         secondaryOpacity={0.12}
-        preserveAspectRatio="xMaxYMax meet"
-        className="random-className"
+        speed={10}
         style={{ marginBottom: '10px' }}
-        ariaLabel="My custom loading title"
+        width={200}
       />
     )
 
@@ -174,5 +175,14 @@ describe('Holder', () => {
       expect(typeof propsFromFullfield.ariaLabel).toBe('string')
       expect(propsFromFullfield.ariaLabel).toBe('My custom loading title')
     })
+
+    it("`baseUrl` is a string and it's used", () => {
+      // defaultProps
+      expect(typeof propsFromEmpty.baseUrl).toBe('string')
+      expect(propsFromEmpty.baseUrl).toBe('')
+      // custom props
+      expect(typeof propsFromFullfield.baseUrl).toBe('string')
+      expect(propsFromFullfield.baseUrl).toBe('/mypage')
+    })
   })
 })
diff --git a/src/__tests__/Svg.tests.tsx b/src/__tests__/Svg.tests.tsx
index ed00aa51..e38d3809 100644
--- a/src/__tests__/Svg.tests.tsx
+++ b/src/__tests__/Svg.tests.tsx
@@ -23,6 +23,22 @@ describe('Svg', () => {
     title: wrapper.findByType('title'),
   }
 
+  it('baseUrl is used correctly', () => {
+    const baseUrl = '/page-path'
+    const wrapperWithBaseUrl = renderer.create(<Svg baseUrl={baseUrl} />).root
+
+    const clipPath = wrapperWithBaseUrl.findByType('clipPath')
+    const linearGradient = wrapperWithBaseUrl.findByType('linearGradient')
+    const rectClipPath = wrapperWithBaseUrl.find(predicateRectClipPath)
+
+    expect(rectClipPath.props.clipPath).toBe(
+      `url(${baseUrl}#${clipPath.props.id})`
+    )
+    expect(rectClipPath.props.style.fill).toBe(
+      `url(${baseUrl}#${linearGradient.props.id})`
+    )
+  })
+
   describe('it has basic elements necessary to work ', () => {
     it('has a `rect` with `clipPath`', () => {
       const { allRectClipPath } = partsOfComponent
diff --git a/src/interface.ts b/src/interface.ts
index f5675aa3..7ffa8a58 100644
--- a/src/interface.ts
+++ b/src/interface.ts
@@ -2,6 +2,7 @@ export interface IContentLoaderProps {
   animate?: boolean
   ariaLabel?: string | boolean
   children?: React.ReactNode
+  baseUrl?: string
   className?: string
   height?: number
   preserveAspectRatio?: