Cant make g in the center of the svg

Question

Hello Stackoverflow community. I need help, I'm trying to make g tag in center of svg tag, but I can't. I've tried making margin 0 auto but still its the same. How can I fix this, here is my jsfiddle with full code: https://jsfiddle.net/mky4qqvd/

<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600px" height="100px" viewBox="0 0 600 100">
                <style type="text/css">

                        text {
                            filter: url(#filter);
                            fill: black;
                            font-family: "Cinzel",serif;
                            font-size: 100px;
                            -webkit-font-smoothing: antialiased;
                            -moz-osx-font-smoothing: grayscale;
                        }

                </style>
                <g style="
    /* width: 100%; */
    width: auto;
">
                    <text x="0" y="100">Swinger</text>
                </g>
                </svg>

Please help me to solve this problem so I could know that in future.

Answer 1

SVG doesn't work that way. SVG has no automatic layout like HTML. Think of it like a drawing program - you have to tell it where to draw everything.

Also HTML style properties like width: auto, margin etc, don't work for SVGs.

SVG does have the ability to centre text horizontally at a specific position in the SVG. And you can centre vertically (kind of) also.

<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600px" height="100px" viewBox="0 0 600 100">
    <style type="text/css">

        text {
            fill: black;
            font-family: "Cinzel",serif;
            font-size: 100px;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            text-anchor: middle;
            alignment-baseline: middle;
        }

    </style>
    <g>
        <text x="300" y="50">Swinger</text>
    </g>
</svg>