3e:null 3f:["$","title",null,{"children":"Scalable Vector Graphics (SVG) | VisCourse | Observable"}] 45:T435,## Text The `` element in SVG is the primary method to incorporate textual content. You can think of it as SVG's equivalent to HTML's `

` or `` but with additional SVG-specific attributes. Dive into the [official documentation](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text) to get a detailed overview. ## Key Attributes of the `` Element: ### Positioning with `x` and `y`: * The attributes `x` and `y` specify the coordinates where the text starts. * The SVG's coordinate system is used, with `x` increasing to the right and `y` increasing downwards. ### Styling the Typeface with `font-family`: * This attribute allows you to set the typeface for the text content. * It functions similarly to the CSS `font-family` property, so familiar typeface names like "Arial", "Times New Roman", or "Verdana" can be used. ### Adjusting Size with `font-size`: * To determine the size of your text, use the `font-size` attribute. * This can be set in units like pixels (`px`), ems (`em`), or any other valid CSS unit. ### Coloring with `fill`:46:[] 43:{"id":"a938cede27aa1792","slug":null,"title":"Scalable Vector Graphics (SVG)","thumbnail":"9a4b07b67a2742cd06dd21b6c2bdb8b255e05a605e924b9dcd86814c876aba44","access_level":"public","create_time":"$D2023-10-02T20:01:25.825Z","update_time":"$D2023-10-09T03:24:09.761Z","view_time":null,"first_public_time":"$D2023-10-09T03:24:25.916Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"911f88a404433e08","login":"viscourse","name":"VisCourse","avatar_url":"https://avatars-next.observableusercontent.com/a066633218ef6bd4c0e650b7f1f72ec6da49de22f34b42b7585c6ee85b9298f9","tier":"starter_2024","bio":"","following":false},"version":156,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"443971f6948f4234","login":"lacepadilla","name":"Lace Padilla","avatar_url":"https://avatars-next.observableusercontent.com/9e70ded93d1383211fe69d5551aa0ce50bacdc1a7ad7cf42b7e6b013e4cda60c","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"443971f6948f4234","login":"lacepadilla","name":"Lace Padilla","avatar_url":"https://avatars-next.observableusercontent.com/9e70ded93d1383211fe69d5551aa0ce50bacdc1a7ad7cf42b7e6b013e4cda60c","tier":null,"role":"editor"},{"type":"team","id":"911f88a404433e08","login":"viscourse","name":"VisCourse","avatar_url":"https://avatars-next.observableusercontent.com/a066633218ef6bd4c0e650b7f1f72ec6da49de22f34b42b7585c6ee85b9298f9","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Scalable Vector Graphics (SVG)","cells":[{"id":8,"value":"# Scalable Vector Graphics (SVG)\n\nThis notebook is based on one by Dan Kerrigan [Guides and Examples](/@nyuvis/d3-introduction?collection=@nyuvis/guides-and-examples), Arvind Satyanarayan's [Introduction to D3](/@mitvis/introduction-to-d3), and Mike Bostock's [Learn D3](/collection/@d3/learn-d3) and [Let's Make a Bar Chart](/@d3/lets-make-a-bar-chart) collections. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":20,"value":"\nSVG, or Scalable Vector Graphics, is an XML-based format for two-dimensional graphics that supports interactivity and animation. It's a key building block when crafting visualizations in D3.js, the popular JavaScript library for manipulating documents based on data. D3 leverages SVG to draw the various shapes, lines, and elements that make up a visualization.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":23,"value":"## Why SVG?\n\n1. **Resolution Independence:** Being a vector format, SVG graphics look crisp at any size or resolution. Whether you're viewing your D3 visualization on a tiny mobile screen or a large desktop monitor, SVG ensures it looks sharp and clear.\n\n2. **DOM Integration:** SVG elements can be manipulated with JavaScript and CSS, much like regular HTML elements. This is where D3 shines – it binds data to SVG elements, allowing for dynamic, data-driven visual transformations.\n\n3. **Interactivity:** SVGs can handle events like clicks, hovers, and drags. Combined with D3's robust set of functions, you can create highly interactive visualizations, from tooltips to zoomable maps.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":25,"value":"## Key SVG Elements in D3\n\n1. **Shapes:** These are the basic building blocks. D3 provides functions to draw standard SVG shapes, including:\n - Circles (`circle`)\n - Rectangles (`rect`)\n - Lines (`line`)\n - Ellipses (`ellipse`)\n - Polygons (`polygon`)\n\n2. **Paths:** The `path` element is a versatile way to define complex shapes in D3 visualizations. With D3's path generators, such as those for lines and areas, creating intricate visuals becomes much simpler.\n\n3. **Text:** With the `text` element, you can embed textual annotations directly into your visualizations.\n\n4. **Groups:** The `g` element groups SVG shapes together. It's invaluable when you want to transform multiple shapes as a single unit.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":27,"value":"### Circles\n\nWe'll start with a circle. First we add an [outer `