arkon / ng-inline-svg Goto Github PK

import { HttpClientModule } from '@angular/common/http';
import { InlineSVGModule } from 'ng-inline-svg';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, HttpClientModule, InlineSVGModule.forRoot()],
  bootstrap: [AppComponent]
})
class AppModule {}

The base URL will be automatically fetched based on your <base> tag. If you want to configure the base URL manually, you can use the forRoot function:

InlineSVGModule.forRoot({ baseUrl: 'https://mysite.com/myapp/' })

You can then use the directive in your templates:

@Component({
  selector: 'app',
  template: `
    <div class="my-icon" aria-label="My icon" [inlineSVG]="'/img/image.svg'"></div>
  `
})
export class AppComponent {}

The SVG file (if found) will be inserted inside the element with the [inlineSVG] directive. Support for icons using the symbol method is also supported (e.g. [inlineSVG]="'#shape-id'").

Options

Inputs

Property name	Type	Default	Description
cacheSVG	boolean	`true`	Caches the SVG based on the absolute URL. Cache only persists for the (sessional) lifetime of the page.
resolveSVGUrl	boolean	`true`	Bypass logic that tries to determine the absolute URL using the page's or configured base URL.
prepend	boolean	`false`	Inserts before the first child instead of appending, overwrites `replaceContents`
replaceContents	boolean	`true`	Replaces the contents of the element with the SVG instead of just appending it to its children.
injectComponent	boolean	`false`	Injects an `<inline-svg>` component containing the SVG inside the element with the directive.
setSVGAttributes	`{ [key: string]: any }`		Sets attributes on the SVG element. Runs after `removeSVGAttributes`.
removeSVGAttributes	string[]		An array of attribute names to remove from all child elements within the SVG.
forceEvalStyles	boolean	`false`	Forces embeded style tags' contents to be evaluated (for IE 11).
evalScripts	`'always'`, `'once'`, `'none'`	`'always'`	Whether to evaluate embedded scripts in the loaded SVG files. The `SVGScriptEvalMode` enum is also provided.
fallbackImgUrl	string		URL for a regular image to be displayed as a fallback if the SVG fails to load.
fallbackSVG	string		SVG filename to be displayed as a fallback if the SVG fails to load.
onSVGLoaded	`(svg: SVGElement, parent: Element \| null) => SVGElement`		Lifecycle hook that allows the loaded SVG to be manipulated prior to insertion.

Outputs

Property name	Callback arguments	Description
onSVGInserted	`e: SVGElement`	Emits the `SVGElement` post-insertion.
onSVGFailed	`e: any`	Emits when there is some error (e.g. embed SVG not supported, fetch failed, etc.)

Server-side rendering with Angular Universal

The SVG files can also be rendered server-side. For this to work, you have to set the baseURL, since Angular needs to have an absolute URL to retrieve the files server-side and we're not able to get your baseURL automatically in a server-side environment. See manual for setting baseURL above.

Here is one way to achieve this dynamically by adding an app initalizing service which sets the base URL based on the environment it runs.

app-server.module.ts:

import { NgModule, APP_INITIALIZER } from '@angular/core';
import { InlineSVGConfig } from 'ng-inline-svg';
import { SVGConfig } from './svg-config';

@NgModule({
  providers: [
    { provide: InlineSVGConfig, useClass: SVGConfig }
  ]
})
export class AppServerModule {}

svg-config.ts:

import { Injectable, Inject } from '@angular/core';
import { InlineSVGConfig } from 'ng-inline-svg';

@Injectable()
export class SVGConfig extends InlineSVGConfig {
  // Do what ever conditions you need to set this, e.g. checking for server-side rendering
  // and only set baseURL when server-side rendered if you want.

  constructor(...) {
    super();

    // When the server-side rendered app runs on localhost:3000, make sure baseURL is
    // http://localhost:3000 and make sure the Express server is configured properly to
    // allow the URL of the asset folders storing the SVG files.
    this.baseUrl = 'http://localhost:3000';

    // If you don't want the directive to run on the server side.
    this.clientOnly = true;

    // If you want to bypass your HttpClient interceptor chain when fetching SVGs.
    this.bypassHttpClientInterceptorChain = true;
  }
}

ng-inline-svg's People

Contributors

Stargazers

Watchers

ng-inline-svg's Issues

Dynamic image path - [inlineSVG]="'{{ imagePath }}'"

Hi Guys,

I have a select box where a number of options are presented to the user for viewing. However, the following doesn't seem to work:

in 'image.ts':
this.imagePath = selected.value; // 'images/my_image.svg'

under template:
<div class="demo-svg1" aria-label="My icon 1" [inlineSVG]="'{{imagePath}}'"></div>

Any ideas are much appreciated :-)

Can I overwrite style?

I've a hamburger icon.

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="64px" height="64px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
<line fill="none" stroke="#ffffff" stroke-width="2" stroke-miterlimit="10" x1="12" y1="21" x2="52" y2="21"/>
<line fill="none"   stroke="#ffffff" stroke-width="2" stroke-miterlimit="10" x1="12" y1="33" x2="52" y2="33"/>
<line fill="none"  stroke="#ffffff"  stroke-width="2" stroke-miterlimit="10" x1="12" y1="45" x2="52" y2="45"/>
</svg>

But by default it already has some color. I'm using few thousands of icons.
Can I overload it in css file? Cause right now it's not working as it is. And !important property doesn't help either.

Why it doesn't change css style?

I am using angular version 2.1.2 and this package, but it can't change css style for svg.
Can you help take a look it?

Below is my code:

inside template of app.component.ts:

<div class="app-div">App</div>
<div class="demo-svg1" aria-label="My icon 1" [inlineSVG]="'./image.svg'"></div>

In css of app.component.ts:

.app-div {
  color: red;
}

svg {
    fill: currentColor;
}

.demo-svg1 {
    color: orangered;
}

Here is the code in plunker: http://plnkr.co/edit/971LgsZTzqUq5vEY9cdF?p=preview. (just focus on code in component and css, as I can't include ng2-inline-svg package correctly on plunker)

Base href is determined incorrectly

Base href is determined incorrectly if application is running under some context, e.g.: http://localhost:8180/appname/%here's_actual_angular_app%
Directive is not 'seeing' "/appname/" context and trying to load from wrong location(not /appname/assets, but /assets)

Make svg styles private/local?

Hi Arkon,

I am currently using your component, it's great! But I am facing a problem: In my svgs are styles embedded, something like this

<svg ..>
  <style type="text/css">
  <![CDATA[
    .st0{ fill:#000; }
  ]]>
  </style>
  ...
</svg>

If I'm inlining the svg, the styles are also "imported". This is not what I want, because it pollutes my global css. If I have another svg using class "st0", the style could be wrong.

Maybe I'm using svg in a wrong way? Otherwise I'm thinking, maybe we could make the classes inside svg "private" by renaming classes to make them unique.

base href issue

get error:
zone.js:2933 GET http://assets/img/logo.svg net::ERR_NAME_NOT_RESOLVED

<span [inlineSVG]="'/assets/img/logo.svg'"></span>

<base href="/">

what is the problem?
previous version was good.
I'm using a hmr.

Fallback image option

replace contents inserts 2x

When replaceContents is true, the SVG element is inserted twice.

If replaceContents is true and prepend is false (or omitted), then the SVG element replaces the content, but then an additional element is inserted.

The culprit is here: https://github.com/arkon/ng-inline-svg/blob/master/src/inline-svg.directive.ts#L151

Error Inline SVG

Im get this error after import the package

GET http://localhost:3000/ng2-inline-svg 404 (Not Found)

In my app.module, I enter this
import { InlineSVGModule } from 'ng2-inline-svg';
and then
@NgModule({ imports: [ InlineSVGModule ]

IE11 embedded styles bug

Hey,

In IE11 if the styles of the svg are embedded into the svg file, it's not adding applying them into the svg.
This definitely is not a problem of the plugin but it's going to be amazing if you can add a fix for it.

So for example the icon
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45 50"><defs><style>.cls-1-big{fill:#d4edff;}.cls-2-big,.cls-3-big{fill:#0073cf;}.cls-3-big{opacity:0.5;}.cls-4-big{fill:none;stroke:#0073cf;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;}</style></defs><title>Registration_3</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><g id="Help"><g id="Form"><rect class="cls-1-big" x="1.5" y="1.5" width="42" height="47" rx="8.5" ry="8.5"/><path class="cls-2-big" d="M35,3a7,7,0,0,1,7,7V40a7,7,0,0,1-7,7H10a7,7,0,0,1-7-7V10a7,7,0,0,1,7-7H35m0-3H10A10,10,0,0,0,0,10V40A10,10,0,0,0,10,50H35A10,10,0,0,0,45,40V10A10,10,0,0,0,35,0Z"/><rect class="cls-3-big" x="9" y="11" width="7" height="7" rx="1.5" ry="1.5"/><line class="cls-4-big" x1="21" y1="15" x2="35" y2="15"/><rect class="cls-3-big" x="9" y="21" width="7" height="7" rx="1.5" ry="1.5"/><line class="cls-4-big" x1="21" y1="25" x2="35" y2="25"/><rect class="cls-3-big" x="9" y="31" width="7" height="7" rx="1.5" ry="1.5"/><line class="cls-4-big" x1="21" y1="35" x2="35" y2="35"/></g></g></g></g></svg>

it's looking like this in IE 11

I think the fix for it can be the following code:

var styleTags = svg.querySelectorAll('style');
      forEach.call(styleTags, function (styleTag) {
        styleTag.textContent += '';
      });

Regards

Component style doesn't get applied

If I use [inlineSVG] inside an angular2 component, the component's css doesn't get applied on the included svg element because the emulated encapsulation.

Support for symbols

https://css-tricks.com/svg-symbol-good-choice-icons/

how to add some class in the inline svg?

Hi,

I find the inputs of options don't have a way to modify style or class of insert svg node. this is intentional or ?

Failing silently

I am trying to add this to my angular 2.1.1 project and it is failing silently - I am running it with webpack. Using plugin version "ng2-inline-svg": "^1.2.0"

External template:

<div class="icon-edit" aria-label="Icon edit" [inlineSVG]="'../assets/svg/sprite.svg'"></div>

I am importing it in my app.module as well. I noticed in your demo you just say "'img/...'" but don't reference where your img fodler is, is that something you set up in a different file?

Add back `svgService.setBaseUrl`

Use with Ionic2

I am using ng-inline-svg with Ionic2, which specifies that all images go in the "src/assets/..." folder but uses webpack or something in the background to relocate those files to another location depending on the platform.

As such, Ionic2 specifies that in template files, assets should be referenced using, for example "assets/img/my-vector-image.svg". This causes problems with ng-inline-svg which is expecting (I guess) an absolute path to the location.

Is there any way that you are aware of to get ng-inline-svg to work nicely with Ionic2?

Cannot find module '@angular/common/http'

Error: Cannot find module '@angular/common/http'

Cannot find module '@angular/common/http'.
L1:  import { HttpClient } from '@angular/common/http';
L2:  import { Observable } from 'rxjs/Observable';

"ng-inline-svg": "^3.2.1" = working good
"ng-inline-svg": "^4.0.0" = err

Use renderer service for element interaction

Currently _insertEl() method use direct DOM property changing/methods call.
https://github.com/arkon/ng-inline-svg/blob/master/src/inline-svg.directive.ts#L152
It's bad if app is running in service worker or on server. Would be cool to use Renderer service here for same things.

Missing .metadata.json for for angular2 AOT compiler

I was upgrading to Ionic 2 RC0 and angular 2.0.1 and got the following error:

ngc error: Error: Unexpected value 'InlineSVGModule' imported by the module 'AppModule'

It occurs because Ionic 2 RC0 uses Ahead of Time (AoT) compiling and ng2-inline-svg does not have the .metadata.json file needed to use angular AoT.

Having trouble adding a red bored around my lab.

I need to have red border whenever i click a button on my buttonlister but i never made a button listener.java and i have no clue on what to do. can someone please help me.

Optionally evaluate scripts within loaded SVGs

Make ng-inline-svg working with server-side rendering.

I noticed, that when rendering an Angular page server-side, the svgs will not show up.

Is there a trick for getting that working or is it just not supported (yet)?

Option to remove fill attributes

And to also remove the <?xml ?> def at the top.

Prevent multiple requests for same resource

Build fails

When running a prod with or without aot I get an error of

ERROR in /src/$$_gendir/node_modules/ng-inline-svg/lib/inline-svg.module.ngfactory.ts (11,21): Cannot find module './inline-svg.component.ngfactory'.
ERROR in /src/$$_gendir/app/app.module.ngfactory.ts (14,21): Cannot find module '../../$$_gendir/node_modules/ng-inline-svg/lib/inline-svg.component.ngfactory'.
ERROR in /src/$$_gendir/app/app-server.module.ngfactory.ts (15,21): Cannot find module '../../$$_gendir/node_modules/ng-inline-svg/lib/inline-svg.component.ngfactory'.
ERROR in /src/$$_gendir/app/app-browser.module.ngfactory.ts (15,21): Cannot find module '../../$$_gendir/node_modules/ng-inline-svg/lib/inline-svg.component.ngfactory'.

SystemJS error. Can't resolve all parameters for SVGCache

I use angular 2.4.0 and ng-inline-svg 3.0.0. Modules a loaded via SystemJS.
Trying to import InlineSVGModule in my SharedModule. Getting this:

(SystemJS) Can't resolve all parameters for SVGCache: (?, [object Object]).

Here's my system.config.js:

System.config({
  paths: {
    'libs:': './libs/'
  },
  map: {
    // ...
    'ng-inline-svg': 'libs:ng-inline-svg',
  },
  packages: {
    // ...
    'ng-inline-svg': {
      main: './lib/index.js',
      defaultExtension: 'js'
    }
  }
});

And shared.module.js:

// many imports go here
import {InlineSVGModule} from "ng-inline-svg";

@NgModule({
  imports: [
    BrowserModule,
    CommonModule,
    FormsModule,
    HttpModule,
    CoreModule,
    RouterModule,
    InlineSVGModule,
  ],
  exports: [
    BrowserModule,
    CommonModule,
    FormsModule,
    HttpModule,
    RouterModule,
    InlineSVGModule,
  ],
  declarations: [
    // ...
  ],
  providers: [ ],
})
export class SharedModule {}

All lib files are in place and I can see them downloaded in dev tools.

Can you please help me?

Use base href from <base> tag

Hi @arkon!

Can the library use by-default base path from the <base href="..."> tag? I think it makes sense, because using relative URLs, we expect that they'll be resolved in next order:

relative to <base> tag;
relative to current URL path.

Currently the library has more powerful way to specify the base path, but this issue is about defaults.

I'm ready to implement this, but I decided to ask beforehand.

Thanks!

Change svg fill color dynamically

Quick question : How can we change the fill color dynamically using this system?

baseURL does not prepend image request when using symbol file with id references

in app.module
InlineSVGModule.forRoot({ baseUrl: '/app/assets/icons/'})

this doesnt work, the request doesnt have the prepended baseURL of /app/assets/icons/
<div class="icon" [inlineSVG]="'symbol-defs.svg#sync_alarm'"></div>

but if i remove the #sync_alarm it prepends.

My work around is to first load the symbols file and with display:none in the root component. Then its cached so i can reference it like so after.

<div class="icon" [inlineSVG]="'#sync_alarm'"></div>

Please let me know if im using this wrong, i saw in the documentation that there is support for symbol files but i didnt not see an example.

Cached SVGs appear as [object SVGSVGElement]

SVG Selecting sub elements

Thankyou Arkon for such a useful Library.

I was wondering maybe you could help me selecting sub element of an SVG and changing its color also putting on click on individual objects of svg e.g:
`

<path
inkscape:connector-curvature="0"
id="AO"
data-name="Angola"
data-id="AO"
d="m 1068.3,609.6 -16.6,-0.1 -1.9,0.7 -1.7,-0.1 -2.3,0.9 -0.5,1.2 2.8,4 1.1,4.3 1.6,6.1 -1.7,2.6 -0.3,1.3 1.3,3.8 1.5,3.9 1.6,2.2 0.3,3.6 -0.7,4.8 -1.8,2.8 -3.3,4.2 -1.3,2.6 -1.9,5.7 -0.3,2.7 -2,5.9 -0.9,5.5 0.5,4 2.7,-1.2 3.3,-1 3.6,0.1 3.2,2.9 0.9,-0.4 22.5,-0.3 3.7,3 13.4,0.9 10.3,-2.5 -3.5,-4 -3.6,-5.2 0.8,-20.3 11.6,0.1 -0.5,-2.2 0.9,-2.4 -0.9,-3 0.7,-3 -0.5,-2 -2.6,-0.4 -3.5,1 -2.4,-0.2 -1.4,0.6 0.5,-7.6 -1.9,-2.3 -0.3,-4 0.9,-3.8 -1.2,-2.4 0,-4 -6.8,0 0.5,-2.3 -2.9,0 -0.3,1.1 -3.4,0.3 -1.5,3.7 -0.9,1.6 -3,-0.9 -1.9,0.9 -3.7,0.5 -2.1,-3.3 -1.3,-2.1 -1.6,-3.8 -1.3,-4.7 z m -21.8,-1.3 0.2,-2.7 0.9,-1.7 2,-1.3 -2,-2.2 -1.8,1.1 -2.2,2.7 1.4,4.8 1.5,-0.7 z"
style="fill:#f2f2f2;fill-rule:evenodd" />
   
<path
inkscape:connector-curvature="0"
id="AL"
data-name="Albania"
data-id="AL"
d="m 1077.5,300.5 -2,3.1 0.5,1.9 0,0 1,1 -0.5,1.9 -0.1,4.3 0.7,3 3,2.1 0.2,1.4 1,0.4 2.1,-3 0.1,-2.1 1.6,-0.9 0,-1.6 -2.3,-1.6 -0.9,-2.6 0.4,-2.1 0,0 -0.5,-2.3 -1.3,-0.6 -1.3,-1.6 -1.3,0.5 -0.4,-1.2 z"
style="fill:#f2f2f2;fill-rule:evenodd" />`

are childs of svg on click of each it should return it's id and using that Id I can change color etc

The demo not working in firefox, and some svg broken too

Its broken, because of use attribute I guess. There is some hacky solution to remove href attribute and then set it again.
Here is another example but it doesn't not contains any use:

<svg version="1.1" id="logo_art" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 315.456 609.059 162.898" enable-background="new 0 315.456 609.059 162.898" xml:space="preserve">
<g>
	<rect x="-72.626" y="237.627" fill="none" width="724.219" height="318.783"></rect>
	<g>
		<g>
			<g>
				
					<radialGradient id="SVGID_1_" cx="324.7268" cy="752.0326" r="15.2513" gradientTransform="matrix(5.3404 0 0 -5.3406 -1241.8398 4413.1929)" gradientUnits="userSpaceOnUse">
					<stop offset="0.8407" style="stop-color:#FFFFFF"></stop>
					<stop offset="1" style="stop-color:#B3B3B3"></stop>
				</radialGradient>
				<path fill="url(#SVGID_1_)" d="M573.764,396.905c0-45.023-36.426-81.449-81.449-81.449s-81.449,36.426-81.449,81.449
					s36.426,81.449,81.449,81.449S573.764,441.928,573.764,396.905z"></path>
				<g>
					<g>
						<g>
							<path fill="#FFFFFF" d="M435.527,361.158c19.684-30.996,60.861-40.272,92.309-20.362s40.951,61.087,21.267,92.083
								c-19.684,30.996-60.861,40.272-92.309,20.362C425.346,433.557,415.843,392.38,435.527,361.158z"></path>
							<path fill="#FEFEFE" d="M436.432,361.158c19.231-30.543,60.182-39.367,91.178-19.91
								c30.996,19.684,40.498,60.408,21.267,90.725c-19.457,30.77-60.182,39.593-91.178,19.91
								C426.703,432.426,417.201,391.701,436.432,361.158z"></path>
							<path fill="#FDFDFD" d="M437.337,361.158c18.779-29.865,59.051-38.462,89.82-19.231
								c30.77,19.457,40.046,59.503,21.267,89.368c-18.779,29.865-59.051,38.462-89.82,19.005
								C428.061,431.068,418.332,391.249,437.337,361.158z"></path>
							<path fill="#FCFCFC" d="M438.016,361.384c18.552-29.412,58.372-37.783,88.689-18.779
								c30.317,19.231,39.593,58.824,21.267,88.01c-18.552,29.186-58.146,37.557-88.463,18.326
								C429.192,429.937,419.689,390.57,438.016,361.384z"></path>
							<path fill="#FBFBFB" d="M438.921,361.384c18.1-28.733,57.467-37.105,87.558-18.1c30.091,19.005,39.367,58.146,21.267,86.653
								c-18.1,28.733-57.241,36.652-87.105,17.647C430.549,428.58,420.821,389.891,438.921,361.384z"></path>
							<path fill="#FAFAFA" d="M439.826,361.384c17.647-28.055,56.562-36.2,86.427-17.647
								c29.638,18.779,38.915,57.241,21.041,85.522c-17.647,28.055-56.109,35.747-85.974,16.969
								C431.681,427.448,421.952,389.439,439.826,361.384z"></path>
							<path fill="#F9F9F9" d="M440.73,361.384c17.421-27.602,55.883-35.521,85.069-16.969
								c29.412,18.552,38.462,56.562,21.041,84.164c-17.421,27.602-55.204,34.842-84.617,16.29
								C433.038,426.091,423.309,388.76,440.73,361.384z"></path>
							<path fill="#F8F8F8" d="M441.635,361.384c16.969-26.923,54.978-34.842,83.938-16.516
								c28.96,18.326,38.01,55.883,21.041,82.807c-16.969,26.923-54.299,33.937-83.259,15.611
								C434.169,424.96,424.441,388.308,441.635,361.384z"></path>
							<path fill="#F7F7F7" d="M442.314,361.384c16.516-26.245,54.073-33.937,82.807-15.837
								c28.733,18.1,37.783,54.978,21.041,81.449c-16.516,26.245-53.394,33.032-81.902,14.932
								C435.527,423.602,425.798,387.629,442.314,361.384z"></path>
							<path fill="#F6F6F6" d="M443.219,361.384c16.29-25.792,53.168-33.258,81.449-15.159
								c28.281,17.874,37.331,54.299,21.041,80.092c-16.29,25.792-52.263,32.127-80.77,14.254
								C436.884,422.471,426.929,387.176,443.219,361.384z"></path>
							<path fill="#F5F5F5" d="M444.124,361.384c15.837-25.113,52.263-32.353,80.318-14.706
								c28.055,17.647,36.878,53.621,21.041,78.734c-15.837,25.113-51.358,31.222-79.413,13.575
								C438.016,421.114,428.287,386.498,444.124,361.384z"></path>
							<path fill="#F4F4F4" d="M445.029,361.384c15.385-24.435,51.584-31.675,79.187-14.027
								c27.602,17.421,36.426,52.942,21.041,77.377c-15.385,24.435-50.453,30.317-78.055,12.67
								C439.373,419.982,429.418,386.045,445.029,361.384z"></path>
							<path fill="#F3F3F3" d="M445.708,361.384c15.159-23.982,50.679-30.77,77.829-13.575c27.376,17.195,36.2,52.037,21.041,76.019
								c-15.159,23.982-49.548,29.412-76.924,11.991C440.504,418.851,430.776,385.366,445.708,361.384z"></path>
							<path fill="#F2F2F2" d="M446.613,361.384c14.706-23.304,49.774-30.091,76.698-12.896
								c26.923,16.969,35.747,51.358,21.041,74.662c-14.706,23.303-48.417,28.507-75.567,11.312
								C441.862,417.494,431.907,384.914,446.613,361.384z"></path>
							<path fill="#F1F1F1" d="M447.518,361.61c14.254-22.625,48.87-29.186,75.567-12.444
								c26.697,16.742,35.295,50.679,21.041,73.304c-14.254,22.625-47.512,27.602-74.209,10.634
								C443.219,416.362,433.038,384.235,447.518,361.61z"></path>
							<path fill="#F0F0F0" d="M448.423,361.61c14.027-22.172,47.965-28.507,74.436-11.765
								c26.245,16.516,34.842,49.775,21.041,71.947c-14.027,22.172-46.607,26.697-72.852,9.955
								C444.35,415.005,434.396,383.556,448.423,361.61z"></path>
							<path fill="#EFEFEF" d="M449.102,361.61c13.575-21.494,47.06-27.602,73.078-11.312c26.018,16.29,34.616,49.096,20.815,70.589
								c-13.575,21.494-45.702,25.566-71.72,9.276C445.708,413.874,435.527,383.104,449.102,361.61z"></path>
							<path fill="#EEEEEE" d="M450.007,361.61c13.122-21.041,46.381-26.923,71.947-10.634
								c25.566,16.29,34.163,48.417,20.815,69.232c-13.122,20.815-44.797,24.661-70.363,8.597
								C446.839,412.516,436.884,382.425,450.007,361.61z"></path>
							<path fill="#EDEDED" d="M450.912,361.61c12.896-20.362,45.476-26.018,70.816-10.181
								c25.34,16.064,33.711,47.512,20.815,67.874c-12.896,20.362-43.666,23.756-69.006,7.919
								C448.197,411.385,438.016,381.973,450.912,361.61z"></path>
							<path fill="#ECECEC" d="M451.817,361.61c12.444-19.684,44.571-25.34,69.458-9.502c24.887,15.837,33.258,46.833,20.815,66.517
								c-12.444,19.684-42.761,22.851-67.874,7.24C449.554,410.027,439.373,381.294,451.817,361.61z"></path>
							<path fill="#EBEBEB" d="M452.722,361.61c11.991-19.231,43.666-24.435,68.327-8.824
								c24.661,15.611,32.806,46.155,20.815,65.159c-11.991,19.231-41.856,21.946-66.517,6.561
								C450.685,408.896,440.504,380.841,452.722,361.61z"></path>
							<path fill="#EAEAEA" d="M453.4,361.61c11.765-18.552,42.761-23.756,67.196-8.371c24.208,15.385,32.58,45.25,20.815,63.802
								c-11.765,18.552-40.951,21.041-65.159,5.882C452.043,407.765,441.862,380.163,453.4,361.61z"></path>
							<path fill="#E9E9E9" d="M454.305,361.61c11.312-17.874,42.082-22.851,66.064-7.692
								c23.982,15.159,32.127,44.571,20.815,62.444c-11.312,17.874-39.82,20.136-63.802,4.977
								C453.174,406.407,442.993,379.71,454.305,361.61z"></path>
							<path fill="#E8E8E8" d="M455.21,361.61c10.86-17.421,41.177-22.172,64.707-7.24c23.53,14.932,31.675,43.892,20.815,61.313
								c-10.86,17.421-38.915,19.231-62.671,4.299C454.532,405.276,444.124,379.031,455.21,361.61z"></path>
							<path fill="#E7E7E7" d="M456.115,361.837c10.634-16.742,40.272-21.267,63.576-6.561
								c23.303,14.48,31.222,42.987,20.589,59.729c-10.634,16.742-38.01,18.326-61.313,3.62
								C455.889,403.919,445.482,378.579,456.115,361.837z"></path>
							<path fill="#E6E6E6" d="M456.794,361.837c10.181-16.064,39.367-20.589,62.444-6.109
								c22.851,14.48,30.996,42.308,20.815,58.598c-10.181,16.064-37.105,17.421-59.956,2.941
								C457.02,402.787,446.613,377.9,456.794,361.837z"></path>
							<path fill="#E6E6E6" d="M457.699,361.837c9.729-15.611,38.462-19.684,61.087-5.43s30.543,41.63,20.815,57.241
								c-9.729,15.611-36.2,16.516-58.824,2.262C458.378,401.43,447.97,377.221,457.699,361.837z"></path>
							<path fill="#E5E5E5" d="M458.604,361.837c9.502-14.932,37.783-19.005,59.956-4.977
								c22.172,14.027,30.091,40.951,20.589,55.883s-35.068,15.611-57.467,1.584C459.509,400.299,449.102,376.769,458.604,361.837z"></path>
							<path fill="#E4E4E4" d="M459.509,361.837c9.05-14.254,36.878-18.1,58.824-4.299c21.946,13.801,29.638,40.046,20.589,54.526
								c-9.05,14.254-34.163,14.706-56.109,0.905C460.867,398.941,450.459,376.09,459.509,361.837z"></path>
							<path fill="#E3E3E3" d="M460.414,361.837c8.597-13.801,35.973-17.421,57.693-3.62c21.494,13.575,29.412,39.367,20.589,53.168
								c-8.597,13.801-33.258,13.801-54.752,0.226C461.998,397.81,451.59,375.638,460.414,361.837z"></path>
							<path fill="#E2E2E2" d="M461.093,361.837c8.371-13.122,35.068-16.516,56.336-3.167c21.267,13.349,28.96,38.688,20.589,51.811
								c-8.371,13.122-32.353,12.896-53.621-0.452C463.355,396.453,452.948,374.959,461.093,361.837z"></path>
							<path fill="#E1E1E1" d="M461.998,361.837c7.919-12.67,34.163-15.837,55.204-2.489c20.815,13.122,28.507,37.783,20.589,50.453
								c-7.919,12.444-31.222,11.991-52.263-1.131C464.713,395.321,454.079,374.507,461.998,361.837z"></path>
							<path fill="#E0E0E0" d="M462.903,361.837c7.466-11.991,33.485-14.932,54.073-2.036
								c20.589,12.896,28.055,37.105,20.589,49.096c-7.466,11.991-30.317,11.086-50.906-1.81
								C465.844,394.19,455.21,373.828,462.903,361.837z"></path>
							<path fill="#DFDFDF" d="M463.808,361.837c7.24-11.312,32.58-14.254,52.716-1.357c20.362,12.896,27.828,36.426,20.589,47.738
								c-7.24,11.312-29.412,10.181-49.775-2.715C467.201,392.833,456.568,373.375,463.808,361.837z"></path>
							<path fill="#DEDEDE" d="M464.487,361.837c6.787-10.86,31.675-13.349,51.584-0.905c19.91,12.67,27.376,35.747,20.589,46.381
								c-6.787,10.86-28.507,9.276-48.417-3.394C468.333,391.701,457.699,372.697,464.487,361.837z"></path>
							<path fill="#DDDDDD" d="M465.392,362.063c6.335-10.181,30.77-12.67,50.453-0.226c19.684,12.444,26.923,34.842,20.589,45.023
								c-6.335,10.181-27.602,8.371-47.06-4.072C469.69,390.344,459.057,372.244,465.392,362.063z"></path>
							<path fill="#DCDCDC" d="M466.297,362.063c6.109-9.502,29.865-11.765,49.096,0.226c19.231,12.217,26.471,34.163,20.589,43.666
								c-6.109,9.502-26.471,7.466-45.702-4.751C471.048,389.213,460.188,371.565,466.297,362.063z"></path>
							<path fill="#DBDBDB" d="M467.201,362.063c5.656-9.05,29.186-11.086,47.965,0.905c19.005,11.991,26.245,33.485,20.589,42.308
								c-5.656,9.05-25.566,6.561-44.571-5.43C472.179,387.855,461.545,370.887,467.201,362.063z"></path>
							<path fill="#DADADA" d="M467.88,362.063c5.204-8.371,28.281-10.181,46.833,1.357c18.552,11.765,25.792,32.58,20.362,40.951
								c-5.204,8.371-24.661,5.656-43.213-6.109C473.536,386.724,462.677,370.434,467.88,362.063z"></path>
							<path fill="#D9D9D9" d="M468.785,362.063c4.977-7.692,27.376-9.502,45.702,2.036s25.34,31.901,20.362,39.593
								c-4.977,7.692-23.756,4.751-41.856-6.787C474.668,385.366,464.034,369.755,468.785,362.063z"></path>
						</g>
					</g>
				</g>
			</g>
			<g>
				<path fill="#D92231" d="M573.764,396.905c0-45.023-36.426-81.449-81.449-81.449s-81.449,36.426-81.449,81.449
					s36.426,81.449,81.449,81.449S573.764,441.928,573.764,396.905z"></path>
				<g>
					
						<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="-34.4083" y1="447.9919" x2="4.8133" y2="504.0505" gradientTransform="matrix(2.2625 9.049908e-004 9.049908e-004 -2.2625 525.3424 1474.1171)">
						<stop offset="0" style="stop-color:#E14E5A"></stop>
						<stop offset="0.0272" style="stop-color:#E04855"></stop>
						<stop offset="0.1698" style="stop-color:#DB2C3B"></stop>
						<stop offset="0.2527" style="stop-color:#D92231"></stop>
						<stop offset="0.4261" style="stop-color:#D92534"></stop>
						<stop offset="0.5431" style="stop-color:#DB2E3C"></stop>
						<stop offset="0.6434" style="stop-color:#DE3D4A"></stop>
						<stop offset="0.7345" style="stop-color:#E1525E"></stop>
						<stop offset="0.8191" style="stop-color:#E66E78"></stop>
						<stop offset="0.899" style="stop-color:#EC9098"></stop>
						<stop offset="0.9739" style="stop-color:#F3B8BD"></stop>
						<stop offset="1" style="stop-color:#F5C8CB"></stop>
					</linearGradient>
					<path fill="url(#SVGID_2_)" d="M569.692,397.131c0-42.761-34.616-77.377-77.377-77.377s-77.377,34.616-77.377,77.377
						s34.616,77.377,77.377,77.377C534.85,474.508,569.692,439.892,569.692,397.131z"></path>
				</g>
			</g>
			<g>
				
					<radialGradient id="SVGID_3_" cx="331.5891" cy="753.1269" r="21.7825" gradientTransform="matrix(5.3404 0 0 -5.3406 -1241.8398 4413.1929)" gradientUnits="userSpaceOnUse">
					<stop offset="0" style="stop-color:#FFFFFF"></stop>
					<stop offset="0.178" style="stop-color:#FCFCFC"></stop>
					<stop offset="0.3187" style="stop-color:#F2F2F2"></stop>
					<stop offset="0.5651" style="stop-color:#E3E3E3"></stop>
					<stop offset="0.7967" style="stop-color:#D1D1D1"></stop>
					<stop offset="1" style="stop-color:#BFBFBF"></stop>
				</radialGradient>
				<path fill="url(#SVGID_3_)" d="M534.623,423.602c-15.159,30.996-39.367,51.358-58.372,53.168
					c-10.407-1.81-21.267-6.561-29.186-12.217c0.226,0,0.679,0.226,1.131,0.226c16.742,0,43.213-29.638,59.277-66.743
					c-21.041-15.837-47.965-28.733-73.078-28.733c-12.896,0-19.231,4.751-20.589,6.335c1.81-7.014,4.525-12.896,7.919-19.005
					c3.167-5.656,6.787-10.634,9.955-13.801c2.941-2.262,11.086-5.43,22.851-5.43c24.887,0,47.286,8.824,64.933,20.815
					c1.131-6.561,1.584-13.122,1.584-19.684c0-15.611-4.751-19.005-6.109-19.91c5.656,1.584,10.86,3.62,15.385,6.109
					c4.299,2.262,7.692,4.525,11.991,7.919c1.584,2.262,6.109,8.145,6.109,28.733c0,7.692-0.679,15.385-1.81,22.625
					c11.991,15.385,18.779,31.675,18.779,43.44c0,2.715-0.452,5.204-0.679,6.335c-4.299,8.145-9.729,15.611-16.516,21.946
					c0.226-0.679,0.679-1.81,0.679-3.62C549.103,445.096,543.447,434.462,534.623,423.602z"></path>
			</g>
			
				<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="186.3656" y1="773.2017" x2="251.4688" y2="742.8436" gradientTransform="matrix(2.2625 0 0 -2.2625 0 2105.0752)">
				<stop offset="0" style="stop-color:#595959"></stop>
				<stop offset="0.0491" style="stop-color:#727272"></stop>
				<stop offset="0.135" style="stop-color:#989898"></stop>
				<stop offset="0.2248" style="stop-color:#B7B7B7"></stop>
				<stop offset="0.3182" style="stop-color:#CFCFCF"></stop>
				<stop offset="0.4168" style="stop-color:#E0E0E0"></stop>
				<stop offset="0.524" style="stop-color:#EAEAEA"></stop>
				<stop offset="0.6559" style="stop-color:#EDEDED"></stop>
				<stop offset="0.7434" style="stop-color:#EAEAEA"></stop>
				<stop offset="0.8063" style="stop-color:#E1E1E1"></stop>
				<stop offset="0.8614" style="stop-color:#D1D1D1"></stop>
				<stop offset="0.9122" style="stop-color:#BBBBBB"></stop>
				<stop offset="0.9594" style="stop-color:#9F9F9F"></stop>
				<stop offset="1" style="stop-color:#808080"></stop>
			</linearGradient>
			<path fill="url(#SVGID_4_)" d="M552.271,452.109c0.226-0.679,0.453-2.715,0.453-4.299c0-27.602-55.657-86.2-113.803-86.2
				c-14.48,0-21.494,4.751-22.625,5.204c0.679-1.584,1.81-4.072,2.489-5.43c1.131-0.452,8.824-4.525,22.625-4.525
				c60.861,0,114.255,58.372,114.255,87.558c0,1.357,0,3.167-0.226,4.072C554.986,449.168,553.628,450.752,552.271,452.109z
				 M423.083,353.918c2.262-1.131,9.729-4.751,23.53-4.751c62.671,0,112.898,58.598,112.898,90.725c0,1.584-0.452,3.394-0.679,4.072
				c0.905-1.131,2.489-3.62,3.167-4.751c0.226-0.679,0.453-2.262,0.453-3.62c0-34.616-50.001-91.178-113.576-91.178
				c-11.539,0-20.136,3.394-21.946,4.525C425.798,350.072,424.667,351.655,423.083,353.918z"></path>
			
				<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="209.8002" y1="718.8026" x2="240.236" y2="784.0725" gradientTransform="matrix(2.2625 0 0 -2.2625 0 2105.0752)">
				<stop offset="0" style="stop-color:#595959"></stop>
				<stop offset="0.0425" style="stop-color:#6C6C6C"></stop>
				<stop offset="0.1473" style="stop-color:#939393"></stop>
				<stop offset="0.2557" style="stop-color:#B4B4B4"></stop>
				<stop offset="0.3669" style="stop-color:#CDCDCD"></stop>
				<stop offset="0.482" style="stop-color:#DFDFDF"></stop>
				<stop offset="0.6035" style="stop-color:#EAEAEA"></stop>
				<stop offset="0.7419" style="stop-color:#EDEDED"></stop>
				<stop offset="0.7873" style="stop-color:#E9E9E9"></stop>
				<stop offset="0.838" style="stop-color:#DBDBDB"></stop>
				<stop offset="0.8913" style="stop-color:#C5C5C5"></stop>
				<stop offset="0.946" style="stop-color:#A6A6A6"></stop>
				<stop offset="1" style="stop-color:#808080"></stop>
			</linearGradient>
			<path fill="url(#SVGID_5_)" d="M527.383,323.375c1.131,1.584,4.299,9.05,4.299,20.589c0,63.576-37.783,113.576-69.684,125.794
				c-1.357,0.452-2.941,0.905-4.299,1.131c-1.358-0.679-3.167-1.584-4.072-2.036c1.81,0,4.525-1.131,5.43-1.584
				c30.091-12.67,68.553-65.386,68.553-124.889c0-11.086-3.62-19.457-5.43-21.041C523.99,321.791,526.252,322.922,527.383,323.375z
				 M533.04,326.316c0.679,1.357,5.43,10.181,5.43,23.982c0,63.349-37.105,111.766-73.757,123.079
				c1.358,0.452,2.941,1.131,4.525,1.584c37.331-9.05,73.53-58.146,73.53-122.626c0-13.801-4.072-21.72-5.204-23.53
				C535.981,328.126,534.171,326.994,533.04,326.316z"></path>
		</g>
		<g>
			<path fill="#D92231" d="M291.407,392.833c0,23.077-16.29,40.046-39.367,40.046c-23.53,0-39.367-16.29-39.367-40.046
				c0-22.399,15.837-40.046,39.367-40.046C275.117,352.787,291.407,369.755,291.407,392.833z M271.045,392.833
				c0-13.349-5.204-25.34-19.005-25.34s-19.005,11.991-19.005,25.34c0,13.349,5.204,25.34,19.005,25.34
				S271.045,406.181,271.045,392.833z M152.943,385.593c-0.905-10.407-4.751-18.779-11.086-24.435
				c-6.109-5.43-14.48-8.371-24.661-8.371c-7.466,0-16.969,2.489-23.982,8.371c-8.371,6.787-14.932,17.647-14.932,32.127
				c0,12.444,4.072,22.625,11.312,29.412c7.24,6.561,17.195,10.407,29.865,10.407c10.181,0,22.172-3.846,27.376-7.014
				c1.81-1.131,2.489-1.584,2.036-3.394l-3.167-9.276c-0.452-1.584-2.036-1.81-3.394-1.131c-2.262,1.131-4.072,2.036-6.335,2.941
				c-4.525,1.584-9.276,2.715-13.575,2.715c-9.276,0-14.706-2.489-18.779-7.24c-2.489-2.941-4.072-6.787-4.525-11.086h51.584
				c1.81,0,2.715-1.357,2.715-3.394v-3.62C153.17,390.344,153.17,387.403,152.943,385.593z M134.391,385.366c0,0-22.399,0-35.747,0
				c0.452-2.489,1.131-4.977,2.262-7.466c3.167-6.335,9.276-10.407,16.742-10.407c10.407,0,16.516,7.014,16.516,17.421v0.452
				H134.391z M171.496,363.873c5.882-7.466,14.932-10.86,29.865-10.86c3.394,0,7.919,0.453,10.407,1.131
				c1.81,0.452,2.036,1.81,1.81,3.62l-1.81,8.597c-0.452,1.584-0.905,2.036-2.036,2.036c-0.226,0-0.679,0-1.131,0
				c-1.131-0.226-4.751-0.452-6.109-0.452c-7.466,0-10.86,1.81-13.575,4.751c-3.167,3.394-3.167,8.145-3.167,16.969
				c0,2.036,0,38.688,0,38.688c0,2.489-1.131,4.072-3.846,4.072h-11.765c-2.489,0-3.62-1.357-3.846-4.072c0,0,0-33.485,0-38.01
				C166.292,376.09,167.197,369.755,171.496,363.873z M39.367,379.936c2.715-2.715,8.824-10.407,15.611-23.303
				c1.131-2.262,2.262-2.715,3.62-2.715h12.67c1.131,0,2.489,0.453,1.81,2.715c-4.977,14.932-16.516,28.055-22.851,34.842
				c7.014,6.561,19.231,22.172,25.113,37.331c0.452,1.357,0.226,2.941-2.715,2.941H57.467c-1.584,0-2.715-0.226-3.846-2.715
				c-3.846-9.276-9.729-19.231-16.29-25.566c-7.24,7.692-12.896,17.421-16.742,25.566c-0.905,2.036-1.81,2.715-3.846,2.715H2.715
				c-0.905,0-1.81-1.131-1.357-2.715c4.072-11.312,12.444-25.566,24.209-36.2c-9.276-11.086-18.1-24.887-21.72-36.426
				c-0.452-1.357,0.452-2.489,1.81-2.489h16.29c1.81,0,2.715,0.679,3.62,2.715C29.638,366.135,35.068,374.959,39.367,379.936z
				 M331.679,379.936c2.715-2.715,8.824-10.407,15.611-23.303c1.131-2.262,2.262-2.715,3.62-2.715h12.67
				c1.131,0,2.489,0.453,1.81,2.715c-4.977,14.932-16.516,28.055-22.851,34.842c7.014,6.561,19.231,22.172,25.113,37.331
				c0.452,1.357,0.226,2.941-2.715,2.941h-15.159c-1.584,0-2.715-0.226-3.846-2.715c-3.846-9.276-9.729-19.231-16.29-25.566
				c-7.24,7.692-12.896,17.421-16.742,25.566c-0.905,2.036-1.81,2.715-3.846,2.715h-13.801c-0.905,0-1.81-1.131-1.357-2.715
				c4.072-11.312,12.444-25.566,24.208-36.2c-9.276-11.086-18.1-24.887-21.72-36.426c-0.452-1.81,0.452-2.715,1.584-2.715h16.29
				c1.81,0,2.715,0.679,3.62,2.715C321.95,366.135,327.607,374.959,331.679,379.936z"></path>
			<path fill="#010101" d="M601.14,328.578c1.584,0.679,2.941,1.584,4.299,2.715c1.131,1.131,2.036,2.715,2.715,4.299
				s0.905,3.394,0.905,5.204c0,1.81-0.226,3.62-0.905,5.204c-0.679,1.584-1.584,2.941-2.715,4.072
				c-1.131,1.131-2.489,2.262-4.299,2.941c-1.584,0.679-3.394,0.905-5.204,0.905c-1.81,0-3.62-0.452-5.204-0.905
				c-1.584-0.679-2.941-1.584-4.299-2.941c-1.131-1.131-2.036-2.489-2.715-4.072c-0.679-1.584-1.131-3.394-1.131-5.204
				c0-1.81,0.453-3.62,1.131-5.204s1.584-2.941,2.715-4.299c1.131-1.131,2.715-2.036,4.299-2.715
				c1.584-0.679,3.394-1.131,5.204-1.131C597.746,327.447,599.556,327.899,601.14,328.578z M591.411,330.162
				c-1.357,0.679-2.489,1.358-3.62,2.489c-0.905,0.905-1.81,2.262-2.263,3.62s-0.905,2.941-0.905,4.525
				c0,1.584,0.226,3.167,0.905,4.525c0.453,1.358,1.357,2.489,2.263,3.62c0.905,1.131,2.262,1.81,3.62,2.489
				c1.358,0.679,2.941,0.905,4.525,0.905s3.167-0.226,4.525-0.905s2.489-1.357,3.62-2.489c0.905-0.905,1.81-2.262,2.262-3.62
				c0.453-1.357,0.905-2.941,0.905-4.525c0-1.584-0.226-3.167-0.905-4.525s-1.357-2.489-2.262-3.62
				c-1.131-1.131-2.263-1.81-3.62-2.489c-1.357-0.679-2.941-0.905-4.525-0.905C594.353,329.257,592.769,329.709,591.411,330.162z
				 M591.185,348.262v-15.159h5.882c1.81,0,2.941,0.453,3.846,1.131c0.905,0.679,1.131,1.81,1.131,3.167c0,0.679,0,1.131-0.226,1.81
				c-0.226,0.452-0.453,0.905-0.905,1.357c-0.453,0.452-0.679,0.679-1.131,0.905c-0.453,0.226-0.905,0.226-1.584,0.452l4.525,6.787
				h-2.262l-4.299-6.787h-3.167v6.787h-1.81V348.262z M597.294,339.891c0.453,0,1.131-0.226,1.358-0.226
				c0.453-0.226,0.679-0.452,1.131-0.679c0.226-0.452,0.453-0.905,0.453-1.584c0-0.452,0-0.905-0.226-1.357
				c-0.226-0.226-0.453-0.679-0.905-0.905c-0.453-0.226-0.679-0.226-1.131-0.453c-0.453,0-0.905,0-1.358,0h-3.394v5.204h2.489
				C596.163,339.891,596.615,339.891,597.294,339.891z"></path>
		</g>
	</g>
</g>
</svg>

Is there a changelog available?

I noticed there was a new major version out (v4) but I can't seem to find any patch notes. Is there a summary of the changes available?

Include OnChange Event

It is possible to include a "watch" method? Would be nice, if the url of the [inlineSVG] changes, the new src is inserted in the element.

edit: "workaround" at the moment:

import {
Directive,
ElementRef,
EventEmitter,
Input,
OnInit,
Output,
OnChanges // <- this is new
} from '@angular/core';

[....]

ngOnChanges(){
this.ngOnInit();
}

Still seeing error with @angular/common/http

I am still seeing related error in 4.0.1 of ng-inline-svg with angular 4.3.6
In the chrome console I see
Evaluating http://192.168.1.5:5000/ui/node_modules/@angular/common/bundles/common.umd.js/**http**

and in http://192.168.1.5:5000/ui/node_modules/ng-inline-svg/lib/svg-cache.service.js
var http_1 = require("@angular/common/http");

Issue with unit testing inserted svg with karma runner

it('Should create new svg element', async(()=>{
    fixture.detectChanges();
    fixture.whenStable().then(()=>{
         //console.log(de.nativeElement.querySelector('#mapWrapper').innerHTML);
        expect(de.nativeElement.querySelector('svg')).toBeTruthy();
    });
}));

I'd expect this to work, however commented out log prints empty string, and query cant find any svg element. Preview loads svg correctly. Am I missing something here?

Not respecting base-href and trying to access subdirectory, img not found

Love the library, works great; however...

Under normal operation, like loading localhost/page1, localhost/page2, everything works great.

If I nav to localhost/page1/sectionA from within the app of course the img is still there, but if I do a hard reload then the lib tries to load the image from localhost/page1/img/ instead of localhost/img like it normally does.

How can we resolve so it does not do this?

Looking through your source I see the following, which if you hard reload onto localhost/page1/sectionA the base.href will come back as localhost/page1, when we want it to resolve to just localhost

const base = this._document.createElement('BASE') as HTMLBaseElement;

fixed
Turns out all I had to do was add a leading forward slash in the invlineSvg path

Ditch Renderer2 to support Angular 2?

I could just check if document is available and do it myself instead of relying on Angular's absurd abstractions in order to bring back Angular 2 support...

Referencing Inline SVG

Thanks so much for this amazing directive!

How can I allow the SVG code to be read inside the components template URL, instead of index.html?
If I have the inline svg in my index file, the svg renders perfectly well. Otherwise I have to add the [injectComponent]="true" directive for it to render the SVG via my components template HTML.

Thanks in advance

innerhtml and UNSAFE_VAR_ASSIGNMENT

Hello - the Mozilla package web-ext is flagging the use of setting innerHtml in this project as UNSAFE_VAR_ASSIGNMENT. Is there any alternative that could be used?

Of note - angular based web extensions will not be accepted at all to the mozilla web ext store due to many reasons. But it would be nice to work on removing reasons they would reject a web ext.

Build error

ctorParameters.map is not a function to ctorParameters.map is not a function

"@angular/core": "2.1.0",

Use Observables instead of Promises

View encapsulation

As mentioned in #22, view encapsulation might be nice to have.

I want to style individual pieces of the inlined SVG within a component and they don't have the view encapsulated DOM properties added
The inserted SVG doesn't have _ngcontent-c12 etc added

An embedded view might be useful for this.

Demo error

When I enter npm install on the demo directory, I get this error
npm ERR! [email protected] lint: tslint src/**/*.ts
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the [email protected] lint script 'tslint src//*.ts'.
npm ERR! This is most likely a problem with the ng2-inline-svg package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! tslint src//*.ts
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs ng2-inline-svg
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!
npm ERR! npm owner ls ng2-inline-svg
npm ERR! There is likely additional logging output above.

Fetching svg from assets seems to fail when running on mobile

Hi there, thanks for this nice plugin.

I have some files in my src/assets/svg-icons folder
I use the plugin like this:
<div class="svg-icon-wrapper" [inlineSVG]=svg></div>
where svg resolves to: "assets/svg-icons/white-logo.svg"

If I run the ionic app in a browser everything works great but when I build the cordova app and run it on a real device (tested on android only) it fails.

Using Chrome inspector I see the following error:
GET file:///assets/svg-icons/white-logo.svg net::ERR_FILE_NOT_FOUND

As a temporary work around I added the following:
if (this.platform.is('cordova') && this.platform.is('android')) {
this.url = '/android_asset/www/' + this.url;
}

Is this the expected behaviour or should this be something the plugin should take care of?

thanks
Alessio

Importing HttpClientModule overwrites existing HTTP_INTERCEPTORS

Repro

import InlineSVGModule in a lazy loaded module (I'm not sure it affects only lazy loaded ones), when HTTP_INTERCEPTORS are provided, and HttpClientModule is imported at a higher level (for example, in the root app module).

Issue

InlineSVGModule imports HttpClientModule. Doing so overwrites existing HTTP_INTERCEPTORS.
According to angular docs, HttpClientModule should be imported only in the root module of the application.

I know your module relies on HttpClientModule, but instead of importing it yourself, you should leave it to the users to import it, so this way HTTP_INTERCEPTORS won't be overwritten.

Configure baseUrl after compilation (outside of module.forRoot())

Hi, I'm having issues resolving a dynamic baseUrl within the forRoot() function during AOT.
I need to add a locale suffix to the baseHref depending on the environment. Currently I get this value from the DOM but this is not available for AOT compilation - is there a way to globally configure baseUrl after compilation?

Cannot find module '../../node_modules/ng2-inline-svg/lib/inline-svg.directive.ngfactory'

After upgrading to angular 2.1.1 and ng2-inline-svg 1.2.0. I am getting the following errors everywhere I use inline-svg:
Cannot find module '../../node_modules/ng2-inline-svg/lib/inline-svg.directive.ngfactory'

Ionic had a similar issue here
ionic-team/ionic-app-scripts#214

and they fixed it with this commit:
ionic-team/ionic-framework@98d474b

I looked in the lib directory (generated js files) and the module exports the directive. I am not sure why this is breaking. Thoughts?

IE10 support?

Would it require a shim like this: https://github.com/dnozay/innersvg-polyfill ?
The problem I faced is replacing the content in place was not working while adding an SVG into the current element was fine.

Here below my own directive (inspired by http://stackoverflow.com/a/38600444/532695 ):

import {Directive, Input, ElementRef, OnChanges, SimpleChange} from '@angular/core';
import {Http} from '@angular/http';

interface Inputs<T> {
  useLoader:T;
}

interface Changes<T> extends Inputs <T> {
  [propertyName:string]:T;
}

/**
 * This directive adds an SVG element into the host element.
 * The content of the SVG will be a symbol specified through the input parameter (url + fragment).
 * This is aimed to allow IE to use the "<svg><use>" feature.
 */
@Directive({
  selector: '[ic-svg-use]'
})
export class UseLoaderDirective implements Inputs<string>, OnChanges {

  @Input('ic-svg-use') public useLoader:string;

  constructor(private element:ElementRef,
              private http:Http) {
  }

  public ngOnChanges(changes:Changes<SimpleChange>):void {
    if (changes.useLoader.currentValue !== undefined) {
      this.sourceChanged();
    }
  }

  private sourceChanged():void {
    const [src, name]:string[] = this.useLoader.split('#');
    if (this.isSourceValid(src, name)) {
      this.loadSVG(src, name);
    }
  }

  private isSourceValid(src:string, name:string):boolean {
    return (src !== undefined) && (name !== undefined);
  }

  private loadSVG(src:string, name:string):void {

    this.http.get(src)
      .map(res => res.text())
      .map(svg => this.convertToSVG(svg, name))
      .toPromise()
      .then(svg => this.applySVG(svg))
      .catch(err => console.log(err));
  }

  private applySVG(content:string):void {
    if (this.isHostElementSVG()) {
      this.replaceSVGContent(content);
    } else {
      this.embedSVG(content);
    }
  }

  private replaceSVGContent(content:string):void {
    // This will fail on IE10 if no shim https://github.com/dnozay/innersvg-polyfill
    const nativeElement:HTMLElement = this.element.nativeElement;
    nativeElement.setAttribute('viewBox', this.extractViewBoxAttribute(content));
    nativeElement.innerHTML = this.extractTagContent(content);
  }

  private embedSVG(content:string):void {
    this.element.nativeElement.innerHTML = content;
  }

  private isHostElementSVG():boolean {
    const nativeElement:HTMLElement = this.element.nativeElement;
    return nativeElement.tagName.toLowerCase() === 'svg';
  }

  private convertToSVG(svg:string, name:string):string {
    const symbolOuterHTML:string = this.extractSymbol(svg, name);
    return this.replaceSymbolWithSVG(symbolOuterHTML);
  }

  private extractTagContent(svg:string):string {
    const endOfOpeningTag:number = svg.indexOf('>');
    const startOfClosingTag:number = svg.lastIndexOf('</');
    return svg.substring(endOfOpeningTag + 1, startOfClosingTag);
  }

  private extractViewBoxAttribute(svg:string):string {
    const viewBoxComplete:string = svg.match(/viewBox=("|').*("|')/i)[0] || '';
    const viewBoxValue:string = viewBoxComplete.substring(9, viewBoxComplete.length - 1);
    return viewBoxValue;
  }

  private extractSymbol(svg:string, name:string):string {
    const matchSymbolWithId:string = `<symbol(.*?)id=("|')${name}("|')(.*?)>([\\S\\s]*?)<\/symbol>`;
    const result:string[] = svg.match(new RegExp(matchSymbolWithId, 'gim')) || [];
    return result[0];
  }

  private replaceSymbolWithSVG(symbolOuterHTML:string):string {
    return symbolOuterHTML.replace('<symbol', '<svg').replace('</symbol>', '</svg>');
  }
}

Using it with Ionic

Hello. When I tried to use this package with Ionic, a simple path change produced different results. You can check it here.

When using the code below, it has worked on the browser but hasn't worked when deployed to the device (android):

<div class="my-icon" aria-label="My icon" [inlineSVG]="'/img/image.svg'"></div>

Changing to this (just a dot in the beginning of the path), has made it work both on the browser and on the device:

<div class="my-icon" aria-label="My icon" [inlineSVG]="'./img/image.svg'"></div>

I think it worth to be mentioned on the readme, something like "if you're using this package with Ionic, please be sure to specify the path like this" + code.

Agree?

arkon / ng-inline-svg Goto Github PK

ng-inline-svg's Introduction

ng-inline-svg

Installation

Usage