# SVG output with Aurelia V2

**URL:** <https://discourse.aurelia.io/t/svg-output-with-aurelia-v2/4450>\
**Category:** Help Requests\
**Created:** [October 25, 2021, 10:02pm UTC](https://discourse.aurelia.io/t/svg-output-with-aurelia-v2/4450 "2021-10-25T22:02:01Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![pswanson-mh](https://avatars.discourse-cdn.com/v4/letter/p/76d3ee/32.png) [@pswanson-mh](https://discourse.aurelia.io/u/pswanson-mh)\
**Post date:** [October 25, 2021, 10:02pm UTC](https://discourse.aurelia.io/t/svg-output-with-aurelia-v2/4450/1 "2021-10-25T22:02:01Z")

</div>

When I am attempting to output a simple SVG graphic I am having trouble utilizing the class attributes on the objects inside the SVG. It seems that Aurelia is binding the class attribute - for instance setting to “au” and then trying to set the classname that I originally had, however, SVG does not allow you to make changes to the class attribute. I am getting the following error:

Uncaught (in promise) TypeError: Cannot set property className of # which has only a getter

Does anyone know a way around this? I would like to take advantage of the SVG objects to diagram out a workflow and I would like to also leverage css to style the objects and reduce repeating visual characteristics.

Note - I am trying to do this in V2 but I assume this may also be an issue in V1 though I have not attempted in the V1 framework.

Thanks in advance  
–Paul

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [October 26, 2021, 12:01am UTC](https://discourse.aurelia.io/t/svg-output-with-aurelia-v2/4450/2 "2021-10-26T00:01:38Z")

</div>

How does the template of the svg look like? Can you also provide a small repro? Maybe create it from here [https://gist.dumber.app](https://gist.dumber.app)

---

<div class="post-metadata">

**Author:** ![pswanson-mh](https://avatars.discourse-cdn.com/v4/letter/p/76d3ee/32.png) [@pswanson-mh](https://discourse.aurelia.io/u/pswanson-mh)\
**Post date:** [October 26, 2021, 12:49pm UTC](https://discourse.aurelia.io/t/svg-output-with-aurelia-v2/4450/3 "2021-10-26T12:49:01Z")

</div>

Go figure, it all seems to work on gist. Perhaps my local version of Aurelia is older. I will attempt to create another repro locally - If not I will look at my current project deeper to see if I can determine what the difference is. I will make sure I post back with my final results. Thanks for your prompt response.

–Paul

---

<div class="post-metadata">

**Author:** ![pswanson-mh](https://avatars.discourse-cdn.com/v4/letter/p/76d3ee/32.png) [@pswanson-mh](https://discourse.aurelia.io/u/pswanson-mh)\
**Post date:** [October 26, 2021, 3:24pm UTC](https://discourse.aurelia.io/t/svg-output-with-aurelia-v2/4450/4 "2021-10-26T15:24:28Z")

</div>

OK, I created a new project locally and slowly applied my settings. It turns out that it has to do with the sass processing. The project I setup was the stock V2 skeleton without sass processing, so when I started copying my webpack settings over it started to bomb when I enabled the option below. Specifically the options line. When I comment that out, the template is rendered without an issue (but the styles are not applied), but when it is enabled then I get the error stating that classname only has a getter.

```auto
        {
          test: /[/\\]src[/\\].+\.html$/i,
          use: {
            loader: '@aurelia/webpack-loader',
            options: { useCSSModule: true }
          },
          exclude: /node_modules/
        }

```

at this point my full webpack.config.js file in my new svg only project is pasted below. I guess this is an issue with Webpack more than aurelia (not sure where the lines are drawn for this). Any direction on how to mitigate this would be appreciated.

```auto
/* eslint-disable @typescript-eslint/no-var-requires */
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer');
const Dotenv = require('dotenv-webpack');

const cssLoader = {
    loader: 'css-loader',
    options: {
      modules: true,
      // https://github.com/webpack-contrib/css-loader#importloaders
      importLoaders: 2
    }
  };
  
  const sassLoader = {
    loader: 'sass-loader',
    options: {
      sassOptions: {
        includePaths: ['node_modules']
      }
    }
  };

const postcssLoader = {
  loader: 'postcss-loader',
  options: {
    postcssOptions: {
      plugins: ['autoprefixer']
    }
  }
};

module.exports = function(env, { analyze }) {
  const production = env.production || process.env.NODE_ENV === 'production';
  return {
    target: 'web',
    mode: production ? 'production' : 'development',
    devtool: production ? undefined : 'eval-cheap-source-map',
    entry: {
      entry: './src/main.ts'
    },
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: production ? '[name].[contenthash].bundle.js' : '[name].bundle.js'
    },
    resolve: {
      extensions: ['.ts', '.js'],
      modules: [path.resolve(__dirname, 'src'), path.resolve(__dirname, 'dev-app'), 'node_modules']
    },
    devServer: {
      historyApiFallback: true,
      open: !process.env.CI,
      port: 8000
    },
    module: {
      rules: [
        { test: /\.(png|svg|jpg|jpeg|gif)$/i, type: 'asset' },
        { test: /\.(woff|woff2|ttf|eot|svg|otf)(\?v=[0-9]\.[0-9]\.[0-9])?$/i, type: 'asset' },
        { test: /\.css$/i, use: ['style-loader', cssLoader, postcssLoader] },
        { test: /\.scss$/i, use: ['style-loader', cssLoader, postcssLoader, sassLoader] },
        { test: /\.ts$/i, use: ['ts-loader', '@aurelia/webpack-loader'], exclude: /node_modules/ },
        {
          test: /[/\\]src[/\\].+\.html$/i,
          use: {
            loader: '@aurelia/webpack-loader',
            options: { useCSSModule: true }
          },
          exclude: /node_modules/
        }
      ]
    },
    plugins: [
      new HtmlWebpackPlugin({ template: 'index.html' }),
      new Dotenv({
        path: `./.env${production ? '' : '.' + process.env.NODE_ENV}`,
      }),
      analyze && new BundleAnalyzerPlugin()
    ].filter(p => p)
  }
}

```

Thanks again,  
–Paul

Edit - I am sorry, I started creating a custom project and see that CssModule is not related to sass but rather an alternative to ShadowDom.

---

<div class="post-metadata">

**Author:** ![pswanson-mh](https://avatars.discourse-cdn.com/v4/letter/p/76d3ee/32.png) [@pswanson-mh](https://discourse.aurelia.io/u/pswanson-mh)\
**Post date:** [October 26, 2021, 3:51pm UTC](https://discourse.aurelia.io/t/svg-output-with-aurelia-v2/4450/5 "2021-10-26T15:51:50Z")

</div>

OK, I was able to get it working, so this is indeed not an Aurelia issue (happy about that). When I removed the option for CSS Module then it started working in full. I am a little confused on when I would need that versus not needing it so I need to get oriented on that. If you have any links to useful details on the usage of CSS Module that would be fantastic.

–Paul