Components: ERROR { Error: Uncaught (in promise): NAMESPACE_ERR: NAMESPACE_ERR (14): the operation is not allowed by Namespaces in XML

[icjking]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

svg renders server side

What is the current behavior?

using

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 810">
    <path fill="#efefee" d="M592.66 0c-15 64.092-30.7 125.285-46.598 183.777C634.056 325.56 748.348 550.932 819.642 809.5h419.672C1184.518 593.727 1083.124 290.064 902.637 0H592.66z"></path>
    <path fill="#f6f6f6" d="M545.962 183.777c-53.796 196.576-111.592 361.156-163.49 490.74 11.7 44.494 22.8 89.49 33.1 134.883h404.07c-71.294-258.468-185.586-483.84-273.68-625.623z"></path>
    <path fill="#f7f7f7" d="M153.89 0c74.094 180.678 161.088 417.448 228.483 674.517C449.67 506.337 527.063 279.465 592.56 0H153.89z"></path>
    <path fill="#fbfbfc" d="M153.89 0H0v809.5h415.57C345.477 500.938 240.884 211.874 153.89 0z"></path>
    <path fill="#ebebec" d="M1144.22 501.538c52.596-134.583 101.492-290.964 134.09-463.343 1.2-6.1 2.3-12.298 3.4-18.497 0-.2.1-.4.1-.6 1.1-6.3 2.3-12.7 3.4-19.098H902.536c105.293 169.28 183.688 343.158 241.684 501.638v-.1z"></path>
    <path fill="#e1e1e1" d="M1285.31 0c-2.2 12.798-4.5 25.597-6.9 38.195C1321.507 86.39 1379.603 158.98 1440 257.168V0h-154.69z"></path>
    <path fill="#e7e7e7" d="M1278.31,38.196C1245.81,209.874 1197.22,365.556 1144.82,499.838L1144.82,503.638C1185.82,615.924 1216.41,720.211 1239.11,809.6L1439.7,810L1439.7,256.768C1379.4,158.78 1321.41,86.288 1278.31,38.195L1278.31,38.196z"></path>
</svg>

throws

ERROR { Error: Uncaught (in promise): NAMESPACE_ERR: NAMESPACE_ERR (14): the operation is not allowed by Namespaces in XML
NAMESPACE_ERR: NAMESPACE_ERR (14): the operation is not allowed by Namespaces in XML
at Object.exports.NamespaceError (/Users/wangchengjun/www/yooli/mock/angular-mock/node_modules/domino/lib/utils.js:28:45)
at SVGSVGElement.setAttribute (/Users/wangchengjun/www/yooli/mock/angular-mock/node_modules/domino/lib/Element.js:422:50)
at t.setAttribute (/Users/wangchengjun/www/yooli/mock/angular-mock/dist/server.js:128:10526)
at t.e.setAttribute (/Users/wangchengjun/www/yooli/mock/angular-mock/dist/server.js:236:11870)
at e.setAttribute (/Users/wangchengjun/www/yooli/mock/angular-mock/dist/server.js:278:24978)

What are the steps to reproduce?

Use the above snippet in any universal applications

What is the use-case or motivation for changing an existing behavior?

to support server side rendering

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

"@angular/animations": "^5.0.0",
"@angular/common": "^5.0.0",
"@angular/compiler": "^5.0.0",
"@angular/core": "^5.0.0",
"@angular/forms": "^5.0.0",
"@angular/http": "^5.0.0",
"@angular/platform-browser": "^5.0.0",
"@angular/platform-browser-dynamic": "^5.0.0",
"@angular/platform-server": "^5.0.0",
"@angular/router": "^5.0.0",
"@nguniversal/express-engine": "^5.0.0-beta.5",
"@nguniversal/module-map-ngfactory-loader": "^5.0.0-beta.5",
"@ngx-translate/core": "^8.0.0",
"@ngx-translate/http-loader": "^2.0.0",
"bunyan": "^1.8.12",
"commander": "^2.11.0",
"core-js": "^2.4.1",
"rxjs": "^5.5.2",
"ts-loader": "^3.1.1",
"zone.js": "^0.8.14"

Test project address:
https://github.com/iTwangcj/angular5-seo-demo

[crisbeto]

This is an error in Angular core, not Material. You can work around it by removing the xmlns attribute.

[icjking]

@crisbeto Thanks，Problem solving。

[RubensTen]

Hello @iTwangcj if I remove this attribute in my svg files, this files are corrupted :/

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}